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)

.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/karma.conf.js

@@ -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/package.json

@@ -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"
   }
 }

bundling/package.json

@@ -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",

bundling/public/index.html → bundling/src/index.html

@@ -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>

bundling/webpack.config.js

@@ -1,11 +1,13 @@
-var path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const path = require('path');
 
 module.exports = {
   mode: 'development',
   entry: './src/app.js',
   output: {
     path: path.resolve(__dirname, 'public'),
-    filename: 'app.bundled.js'
+    filename: 'app.js'
   },
   module: {
     rules: [
@@ -14,5 +16,12 @@ module.exports = {
         type: 'asset/source'
       }
     ]
-  }
+  },
+  plugins: [
+    new CopyWebpackPlugin({
+      patterns: [
+        { from: 'src/index.html', to: '.' }
+      ]
+    })
+  ]
 };

bundling/webpack.es5.config.js

@@ -1,11 +1,13 @@
-var path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const path = require('path');
 
 module.exports = {
   mode: 'development',
   entry: './src/app.js',
   output: {
     path: path.resolve(__dirname, 'public'),
-    filename: 'app.bundled.js'
+    filename: 'app.js'
   },
   module: {
     rules: [
@@ -24,5 +26,12 @@ module.exports = {
         }
       }
     ]
-  }
+  },
+  plugins: [
+    new CopyWebpackPlugin({
+      patterns: [
+        { from: 'src/index.html', to: '.' }
+      ]
+    })
+  ]
 };

commenting/README.md

@@ -23,7 +23,7 @@ npm install
 ```
 
 
-Building the app into the `dist` directory and opening it in a browser:
+Building the app into the `public` directory and opening it in a browser:
 
 ```
 npm run dev