chore: unify examples

* ensure every plug-in follows a similar structure
* drop browserify + grunt legacy
* sources in `src` bundles to `public` directory
* `dev` and `all` scripts
* use single `lint` task across all projects
* use single instance of required configuration files (*ignore)

Author: nikku

.eslintignore

@@ -1 +1,2 @@
-public
+public
+dist

.github/workflows/CI.yml

@@ -19,6 +19,6 @@ jobs:
     - name: Install dependencies
       run: npm ci
     - name: Build examples
-      run: npm run build:examples
+      run: npm run build
     - name: Lint examples
-      run: npm run lint:examples
+      run: npm run lint

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
+public/
 dist/
 .idea
 *.iml

bpmn-properties/.babelrc

@@ -1,8 +1,15 @@
+// use puppeteer provided Chrome for testing
+process.env.CHROME_BIN = require('puppeteer').executablePath();
+
+// configures browsers to run test against
+// any of [ 'ChromeHeadless', 'Chrome', 'Firefox', 'Safari' ]
+const browsers = (process.env.TEST_BROWSERS || 'ChromeHeadless').split(',');
+
 module.exports = function(karma) {
   karma.set({
 
     frameworks: [
-      'browserify',
+      'webpack',
       'mocha',
       'chai'
     ],
@@ -14,32 +21,25 @@ module.exports = function(karma) {
     reporters: [ 'dots' ],
 
     preprocessors: {
-      'test/spec/**/*Spec.js': [ 'browserify' ]
+      'test/spec/**/*Spec.js': [ 'webpack' ]
     },
 
-    browsers: [ 'Chrome' ],
-
-    browserNoActivityTimeout: 30000,
+    browsers,
 
     singleRun: true,
     autoWatch: false,
 
-    // browserify configuration
-    browserify: {
-      debug: true,
-      transform: [
-        [ 'stringify', {
-          global: true,
-          extensions: [
-            '.bpmn',
-            '.xml',
-            '.css'
-          ]
-        } ],
-        [ 'babelify', {
-          global: true
-        } ],
-      ]
+    webpack: {
+      mode: 'development',
+      module: {
+        rules: [
+          {
+            test: /\.css|\.bpmn$/,
+            type: 'asset/source'
+          }
+        ]
+      },
+      devtool: 'eval-source-map'
     }
   });
 };

bpmn-properties/.gitignore

@@ -3,8 +3,7 @@
   "version": "0.0.0",
   "description": "An example how to read and write custom BPMN 2.0 extensions",
   "scripts": {
-    "all": "run-s lint test",
-    "lint": "eslint .",
+    "all": "run-s test",
     "dev": "npm test -- --auto-watch --no-single-run",
     "test": "karma start"
   },
@@ -27,30 +26,21 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "babelify": "^10.0.0",
-    "browserify": "^16.0.0",
     "chai": "^4.1.2",
-    "eslint": "^8.25.0",
-    "eslint-plugin-bpmn-io": "^1.0.0",
     "karma": "^6.0.0",
     "karma-browserify": "^8.0.0",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.0.0",
     "karma-firefox-launcher": "^2.0.0",
-    "karma-ie-launcher": "^1.0.0",
     "karma-mocha": "^2.0.0",
-    "karma-phantomjs-launcher": "^1.0.0",
-    "karma-safari-launcher": "^1.0.0",
+    "karma-webpack": "^5.0.0",
     "mocha": "^10.0.0",
     "mocha-test-container-support": "^0.2.0",
     "npm-run-all": "^4.1.2",
-    "stringify": "^5.0.0",
-    "watchify": "^3.10.0"
+    "puppeteer": "^21.5.2",
+    "webpack": "^5.89.0"
   },
   "dependencies": {
-    "bpmn-js": "^15.2.2",
-    "inherits": "^2.0.1"
+    "bpmn-js": "^15.2.2"
   }
 }

bpmn-properties/karma.conf.js

@@ -2,14 +2,13 @@
   "name": "bpmn-js-example-commonjs",
   "version": "0.0.0",
   "description": "An example how to bundle an app using bpmn-js for the browser",
-  "main": "src/app.js",
   "scripts": {
-    "all": "run-s bundle open",
+    "all": "run-s build build:es5",
     "build": "webpack",
     "build:es5": "webpack --config webpack.es5.config.js",
     "build:watch": "webpack -w",
     "open": "opn ./public/index.html",
-    "dev": "npm run bundle:watch"
+    "dev": "run-p bundle:watch open"
   },
   "repository": {
     "type": "git",

bpmn-properties/package.json

@@ -13,7 +13,7 @@
   </style>
 
   <!-- required viewer styles -->
-  <link rel="stylesheet" href="https://unpkg.com/bpmn-js@9.0.1/dist/assets/bpmn-js.css">
+  <link rel="stylesheet" href="https://unpkg.com/bpmn-js@15.0.1/dist/assets/bpmn-js.css">
 
   <!--
     this is an example of how to use bpmn-js in a standalone application built with
@@ -28,6 +28,6 @@ <h1>Pizza Collaboration Viewer</h1>
 
   <div id="canvas"></div>
 
-  <script src="./app.bundled.js"></script>
+  <script src="./app.js"></script>
 </body>
 </html>