Merge pull request #1331 from ivmartel/399-es6-webpack

399 es6 webpack

.eslint-full.js

@@ -5,5 +5,10 @@ module.exports = {
   extends: [
     '.eslintrc.js',
     'plugin:jsdoc/recommended',
-  ]
+  ],
+  rules: {
+    // no undefined type
+    // https://github.com/gajus/eslint-plugin-jsdoc#user-content-eslint-plugin-jsdoc-rules-no-undefined-types
+    'jsdoc/no-undefined-types': 'off'
+  }
 };

.eslintrc.js

@@ -2,24 +2,28 @@ module.exports = {
   env: {
     browser: true,
     node: true,
-    jquery: true,
     es6: true,
-    es2020: true
-  },
-  globals: {
-    dwv: 'readonly'
+    es2022: true
   },
   extends: [
     'eslint:recommended',
   ],
+  parserOptions: {
+    sourceType: 'module'
+  },
   rules: {
     // require triple equal
     // https://eslint.org/docs/rules/eqeqeq
     eqeqeq: 'error',
     // force semi colon
     // https://eslint.org/docs/rules/semi
     semi: ['error'],
-
+    // no var
+    // https://eslint.org/docs/rules/no-var
+    'no-var': 'error',
+    // prefer const
+    // https://eslint.org/docs/rules/prefer-const
+    'prefer-const': 'error',
     // allow for some unused args
     // https://eslint.org/docs/rules/no-unused-vars
     'no-unused-vars': ['error', {argsIgnorePattern: '^_'}],

decoders/dwv/decode-rle.js

@@ -9,7 +9,8 @@ importScripts('rle.js');
 self.addEventListener('message', function (event) {
 
   // decode DICOM buffer
-  var decoder = new dwv.decoder.RleDecoder();
+  // eslint-disable-next-line no-undef
+  var decoder = new dwvdecoder.RleDecoder();
   // post decoded data
   self.postMessage([decoder.decode(
     event.data.buffer,

decoders/dwv/rle.js

@@ -1,12 +1,12 @@
 // namespaces
-var dwv = dwv || {};
-dwv.decoder = dwv.decoder || {};
+// (do not use dwv since it is the exported module name)
+var dwvdecoder = dwvdecoder || {};
 
 /**
  * RLE (Run-length encoding) decoder class.
  * @constructor
  */
-dwv.decoder.RleDecoder = function () {};
+dwvdecoder.RleDecoder = function () {};
 
 /**
  * Decode a RLE buffer.
@@ -20,7 +20,7 @@ dwv.decoder.RleDecoder = function () {};
  * @returns The decoded buffer.
  * @see http://dicom.nema.org/dicom/2013/output/chtml/part05/sect_G.3.html
  */
-dwv.decoder.RleDecoder.prototype.decode = function (buffer,
+dwvdecoder.RleDecoder.prototype.decode = function (buffer,
   bitsAllocated, isSigned, sliceSize, samplesPerPixel, planarConfiguration) {
 
   // bytes per element

karma.conf.js

@@ -4,48 +4,10 @@
 module.exports = function (config) {
   config.set({
     basePath: '.',
-    frameworks: ['qunit'],
+    frameworks: ['qunit', 'webpack'],
     files: [
-      // dependencies
-      {pattern: 'node_modules/konva/konva.min.js', watched: false},
-      {pattern: 'node_modules/jszip/dist/jszip.min.js', watched: false},
-      // benchmark
-      {pattern: 'node_modules/lodash/lodash.min.js', watched: false},
-      {pattern: 'node_modules/benchmark/benchmark.js', watched: false},
-      // decoders
-      {pattern: 'decoders/**/*.js', included: false},
-      // test data
-      {pattern: 'tests/data/**/*.dcm', included: false},
-      {pattern: 'tests/data/DICOMDIR', included: false},
-      {pattern: 'tests/data/*.dcmdir', included: false},
-      {pattern: 'tests/data/*.zip', included: false},
-      {pattern: 'tests/dicom/*.json', included: false},
-      {pattern: 'tests/state/**/*.json', included: false},
-      // extra served content
-      {pattern: 'tests/**/*.html', included: false},
-      {pattern: 'tests/visual/appgui.js', included: false},
-      {pattern: 'tests/visual/style.css', included: false},
-      {pattern: 'tests/dicom/pages/*.js', included: false},
-      {pattern: 'tests/image/pages/*.js', included: false},
-      {pattern: 'tests/pacs/*.js', included: false},
-      {pattern: 'tests/bench/*.js', included: false},
-      {pattern: 'tests/utils/worker.js', included: false},
-      {pattern: 'tests/visual/images/*.jpg', included: false},
-      {pattern: 'tests/pacs/images/*.png', included: false},
-      {pattern: 'dist/*.js', included: false},
-      {pattern: 'build/dist/*.js', included: false},
-      // src
-      'src/**/*.js',
-      // test
-      'tests/**/*.test.js',
-      'tests/dicom/*.js'
+      {pattern: 'tests/**/*.test.js', watched: false}
     ],
-    proxies: {
-      '/tests/data/': '/base/tests/data/',
-      '/tests/dicom/': '/base/tests/dicom/',
-      '/tests/state/': '/base/tests/state/',
-      '/tests/utils/': '/base/tests/utils/'
-    },
     client: {
       clearContext: false,
       qunit: {
@@ -54,35 +16,40 @@ module.exports = function (config) {
       }
     },
     preprocessors: {
-      'src/**/*.js': ['coverage']
+      'src/**/*.js': ['webpack', 'sourcemap'],
+      'tests/**/*.test.js': ['webpack']
     },
     coverageReporter: {
-      dir: require('path').join(__dirname, './build/coverage/dwv'),
+      dir: require('path').join(__dirname, './build/coverage/'),
       reporters: [
         {type: 'html', subdir: 'report-html'},
-        {type: 'lcovonly', subdir: '.', file: 'report-lcovonly.txt'},
         {type: 'text-summary'}
       ],
       check: {
         global: {
-          statements: 40,
-          branches: 39,
-          functions: 30,
-          lines: 40
+          statements: 45,
+          branches: 45,
+          functions: 45,
+          lines: 45
         }
       }
     },
     reporters: ['progress'],
     logLevel: config.LOG_INFO,
-    customLaunchers: {
-      ChromeWithTestsPage: {
-        base: 'Chrome',
-        flags: [
-          'http://localhost:9876/base/tests/index.html'
-        ]
-      }
-    },
-    browsers: ['ChromeWithTestsPage'],
-    restartOnFileChange: true
+    browsers: ['Chrome'],
+    restartOnFileChange: true,
+    webpack: webpackConfig()
   });
 };
+
+/**
+ * Get the webpack config to pass to Karma.
+ *
+ * @returns {object} The config.
+ */
+function webpackConfig() {
+  const config = require('./webpack.test.js');
+  delete config.entry;
+  delete config.output;
+  return config;
+}

package.json

@@ -27,31 +27,36 @@
     "magic-wand-tool": "~1.1.7"
   },
   "devDependencies": {
+    "@babel/core": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-istanbul": "^6.1.1",
     "benchmark": "~2.1.4",
     "clean-jsdoc-theme": "^4.2.6",
     "eslint": "~8.36.0",
     "eslint-plugin-jsdoc": "~40.1.0",
     "github-release-notes": "0.17.2",
-    "grunt": "^1.6.1",
-    "grunt-cli": "^1.4.3",
-    "grunt-contrib-concat": "^2.1.0",
-    "grunt-contrib-copy": "^1.0.0",
-    "grunt-contrib-uglify": "^5.2.2",
-    "grunt-contrib-watch": "^1.1.0",
+    "html-webpack-plugin": "^5.5.0",
     "jsdoc": "^4.0.2",
     "karma": "^6.4.1",
     "karma-chrome-launcher": "^3.1.1",
     "karma-coverage": "^2.2.0",
     "karma-qunit": "^4.1.2",
-    "qunit": "^2.19.4"
+    "karma-sourcemap-loader": "^0.4.0",
+    "karma-webpack": "^5.0.0",
+    "qunit": "^2.19.4",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-merge": "^5.8.0"
   },
   "scripts": {
+    "start": "webpack serve --config webpack.dev.js",
+    "build": "webpack --config webpack.prod.js",
     "lint": "eslint -c '.eslint-full.js' 'src/**/*.js' 'tests/**/*.js' '*.js'",
     "test": "karma start ./karma.conf.js",
     "test-ci": "karma start ./karma.conf.js --browsers ChromeHeadless --reporters progress,coverage --single-run",
-    "build": "grunt build",
     "doc": "jsdoc -c resources/doc/jsdoc.conf.json",
-    "dev": "grunt dev",
     "gren": "gren"
   }
 }

resources/doc/tutorials/standards.md

@@ -11,10 +11,7 @@ These are the standards that should be used when coding for this project.
  * Versioning: [Semantic Versioning](http://semver.org/)
  * Branch: try to follow some kind of [branching model](http://nvie.com/posts/a-successful-git-branching-model/)
 
-These standards are enforced using Continuous Integration with [github-actions](https://github.com/features/actions): builds using [node](http://nodejs.org/) (see `.github/workflows/nodejs-ci.yml`) and [yarn](https://classic.yarnpkg.com). The CI basically executes `yarn install` that reads the `package.json` file and then runs `yarn run test`. This test target is configured to run a task runner called [Grunt](http://gruntjs.com/) which is configured with the `Gruntfile.js` file. The `package.json` file contains shortcuts to grunt scripts:
-  * `yarn run test` -> [grunt-karma](https://www.npmjs.org/package/grunt-karma) that allows to run qunit tests using a headless browser such a Google Chrome
-  * `yarn run lint` -> [grunt-eslint](https://www.npmjs.org/package/grunt-eslint) that lints the code
-  * `yarn run build` -> [grunt-contrib-concat](https://www.npmjs.org/package/grunt-contrib-concat) that concatenates a list of files together and [grunt-contrib-uglify](https://www.npmjs.org/package/grunt-contrib-uglify) that minifies the code
+These standards are enforced using Continuous Integration with [github-actions](https://github.com/features/actions): builds using [node](http://nodejs.org/) (see `.github/workflows/nodejs-ci.yml`) and [yarn](https://classic.yarnpkg.com). The CI executes the lint and test scripts.
 
 Others
  * Icons: firefox-os [styleguide](http://www.mozilla.org/en-US/styleguide/products/firefox-os/icons/)