feat(dicomImageLoader types): Add types to the dicom image loader

.webpack/webpack.base.js

@@ -37,6 +37,10 @@ module.exports = (env, argv, { DIST_DIR }) => {
             envName: mode,
           },
         },
+        {
+          test: /\.wasm/,
+          type: 'asset/resource',
+        },
       ],
     },
     resolve: {
@@ -70,7 +74,7 @@ module.exports = (env, argv, { DIST_DIR }) => {
       // Show build progress
       new webpack.ProgressPlugin(),
       // Clear dist between builds
-      new CleanWebpackPlugin()
+      new CleanWebpackPlugin(),
     ],
   };
 

package.json

@@ -68,13 +68,12 @@
     "css-loader": "^5.2.7",
     "cssnano": "^4.1.11",
     "eslint": "^8.17.0",
-    "eslint-loader": "4.0.2",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "6.x",
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-tsdoc": "^0.2.14",
-    "eslint-webpack-plugin": "^2.6.0",
+    "eslint-webpack-plugin": "^4.0.0",
     "file-loader": "^6.2.0",
     "follow-redirects": "^1.10.0",
     "html-webpack-plugin": "^5.5.0",

packages/adapters/examples/cornerstoneDICOMSR/index.html

@@ -85,7 +85,7 @@ <h1>
         <script src="https://unpkg.com/cornerstone-tools@4.16.1/dist/cornerstoneTools.js"></script>
 
         <script src="https://unpkg.com/dicom-parser/dist/dicomParser.js"></script>
-        <script src="https://unpkg.com/cornerstone-wado-image-loader@3.0.2/dist/cornerstoneWADOImageLoader.min.js"></script>
+        <script src="https://unpkg.com/@cornerstonejs/dicom-image-loader@3.0.2/dist/cornerstoneDICOMImageLoader.min.js"></script>
         <script src="https://unpkg.com/hammerjs/hammer.min.js"></script>
 
         <script src="/js/initCornerstone.js"></script>

packages/adapters/src/adapters/Cornerstone/Segmentation_3X.js

@@ -513,7 +513,7 @@ function getImageIdOfReferencedFrame(
         const imageIdFrameNumber = Number(imageId.split("frame=")[1]);
 
         return (
-            //frameNumber is zero indexed for cornerstoneWADOImageLoader image Ids.
+            //frameNumber is zero indexed for cornerstoneDICOMImageLoader image Ids.
             sopCommonModule.sopInstanceUID === sopInstanceUid &&
             imageIdFrameNumber === frameNumber - 1
         );

packages/adapters/src/adapters/Cornerstone/Segmentation_4X.js

@@ -1408,7 +1408,7 @@ function getImageIdOfReferencedFrame(
         const imageIdFrameNumber = Number(imageId.split("frame=")[1]);
 
         return (
-            //frameNumber is zero indexed for cornerstoneWADOImageLoader image Ids.
+            //frameNumber is zero indexed for cornerstoneDICOMImageLoader image Ids.
             sopCommonModule.sopInstanceUID === sopInstanceUid &&
             imageIdFrameNumber === frameNumber - 1
         );

packages/core/examples/wadouri/index.ts

@@ -9,7 +9,7 @@ import {
   setTitleAndDescription,
   ctVoiRange,
 } from '../../../../utils/demo/helpers';
-import initCornerstoneWADOImageLoader from '../../../../utils/demo/helpers/initCornerstoneWADOImageLoader';
+import initCornerstoneDICOMImageLoader from '../../../../utils/demo/helpers/initCornerstoneDICOMImageLoader';
 import { init as csRenderInit } from '@cornerstonejs/core';
 
 // This is for debugging purposes
@@ -99,7 +99,7 @@ addButtonToToolbar({
  */
 async function run() {
   // Init Cornerstone and related libraries
-  initCornerstoneWADOImageLoader();
+  initCornerstoneDICOMImageLoader();
   await csRenderInit();
 
   const renderingEngine = new RenderingEngine(renderingEngineId);

packages/core/examples/webLoader/registerWebImageLoader.ts

@@ -176,7 +176,7 @@ function registerWebImageLoader(imageLoader): void {
 }
 
 /**
- * Small stripped down loader from cornerstoneWADOImageLoader
+ * Small stripped down loader from cornerstoneDICOMImageLoader
  * Which doesn't create cornerstone images that we don't need
  */
 function _loadImageIntoBuffer(

packages/core/src/RenderingEngine/StackViewport.ts

@@ -413,7 +413,7 @@ class StackViewport extends Viewport implements IStackViewport {
         windowCenter = windowCenter[0];
       }
 
-      // when cornerstoneWADOImageLoader uses cornerstonejs/core types
+      // when cornerstoneDICOMImageLoader uses cornerstonejs/core types
       // this marshalling step can be removed.
       if (Object.values(VOILUTFunctionType).indexOf(voiLUTFunction) === -1) {
         voiLUTFunction = VOILUTFunctionType.LINEAR;

packages/core/src/enums/Events.ts

@@ -162,7 +162,7 @@ enum Events {
   IMAGE_SPACING_CALIBRATED = 'CORNERSTONE_IMAGE_SPACING_CALIBRATED',
   /**
    * Triggers on the eventTarget when there is a progress in the image load process. Note: this event
-   * is being used in the Cornerstone-WADO-Image-Loader repository. See {@link https://github.com/cornerstonejs/cornerstoneWADOImageLoader/blob/master/src/imageLoader/internal/xhrRequest.js | here}
+   * is being used in the dicom-image-loader repository. See {@link https://github.com/cornerstonejs/cornerstoneDICOMImageLoader/blob/master/src/imageLoader/internal/xhrRequest.js | here}
    *
    * Make use of {@link EventTypes.ImageLoadProgress | ImageLoadProgress Event Type } for typing your event listeners for IMAGE_LOAD_PROGRESS event,
    * and see what event detail is included in {@link EventTypes.ImageLoadProgressEventDetail | ImageLoadProgress Event Detail }

packages/dicomImageLoader/.webpack/merge.js

@@ -0,0 +1,19 @@
+const _ = require('lodash');
+
+// Merge two objects
+// Instead of merging array objects index by index (n-th source
+// item with n-th object item) it concatenates both arrays
+module.exports = function (object, source) {
+  const clone = _.cloneDeep(object);
+  const merged = _.mergeWith(
+    clone,
+    source,
+    function (objValue, srcValue, key, object, source, stack) {
+      if (objValue && srcValue && _.isArray(objValue) && _.isArray(srcValue)) {
+        return _.concat(objValue, srcValue);
+      }
+    }
+  );
+
+  return merged;
+};

packages/dicomImageLoader/config/webpack/webpack-base.js → packages/dicomImageLoader/.webpack/webpack-base.js

@@ -1,10 +1,10 @@
 const path = require('path');
 const webpack = require('webpack');
-
 const rootPath = process.cwd();
 const context = path.join(rootPath, 'src');
 const codecs = path.join(rootPath, 'codecs');
 const outputPath = path.join(rootPath, 'dist');
+const ESLintPlugin = require('eslint-webpack-plugin');
 
 const BundleAnalyzerPlugin =
   require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
@@ -13,7 +13,7 @@ module.exports = {
   mode: 'development',
   context,
   entry: {
-    cornerstoneDICOMImageLoader: './imageLoader/index.js',
+    cornerstoneDICOMImageLoader: './imageLoader/index.ts',
   },
   target: 'web',
   output: {
@@ -36,6 +36,7 @@ module.exports = {
     },
   },
   resolve: {
+    extensions: ['.ts', '.js'],
     fallback: {
       fs: false,
       path: false,
@@ -44,21 +45,12 @@ module.exports = {
   module: {
     noParse: [/(codecs)/],
     rules: [
-      // {
-      //   enforce: 'pre',
-      //   test: /\.js$/,
-      //   exclude: /(node_modules)|(codecs)/,
-      //   loader: 'eslint-loader',
-      //   options: {
-      //     failOnError: false,
-      //   },
-      // },
       {
         test: /\.wasm/,
         type: 'asset/resource',
       },
       {
-        test: /\.worker\.js$/,
+        test: /\.worker\.(mjs|js|ts)$/,
         use: [
           {
             loader: 'worker-loader',
@@ -69,7 +61,7 @@ module.exports = {
         ],
       },
       {
-        test: /\.js$/,
+        test: /\.(mjs|js|ts)$/,
         exclude: [/(node_modules)/, /(codecs)/],
         use: {
           loader: 'babel-loader',
@@ -88,6 +80,6 @@ module.exports = {
   // experiments: {
   //   asyncWebAssembly: true,
   // },
-  plugins: [new webpack.ProgressPlugin()],
+  plugins: [new ESLintPlugin(), new webpack.ProgressPlugin()],
   // plugins: [new webpack.ProgressPlugin(), new BundleAnalyzerPlugin()],
 };

packages/dicomImageLoader/config/webpack/webpack-bundle.js → packages/dicomImageLoader/.webpack/webpack-bundle.js

@@ -1,6 +1,5 @@
 const path = require('path');
 const webpack = require('webpack');
-
 const rootPath = process.cwd();
 const context = path.join(rootPath, 'src');
 const codecs = path.join(rootPath, 'codecs');
@@ -16,8 +15,8 @@ module.exports = {
   mode: 'production',
   context,
   entry: {
-    cornerstoneDICOMImageLoader: './imageLoader/index.js',
-    cornerstoneDICOMImageLoaderNoWebWorkers: './imageLoader/index-noWorkers.js',
+    cornerstoneDICOMImageLoader: './imageLoader/index.ts',
+    cornerstoneDICOMImageLoaderNoWebWorkers: './imageLoader/index-noWorkers.ts',
   },
   target: 'web',
   output: {
@@ -40,6 +39,7 @@ module.exports = {
     },
   },
   resolve: {
+    extensions: ['.ts', '.js'],
     fallback: {
       fs: false,
       path: false,
@@ -50,7 +50,7 @@ module.exports = {
     rules: [
       // {
       //   enforce: 'pre',
-      //   test: /\.js$/,
+      //   test: /\.(mjs|js|ts)$/,
       //   exclude: /(node_modules)|(codecs)/,
       //   loader: 'eslint-loader',
       //   options: {
@@ -62,7 +62,7 @@ module.exports = {
         type: 'asset/inline',
       },
       {
-        test: /\.worker\.js$/,
+        test: /\.worker\.(mjs|js|ts)$/,
         use: [
           {
             loader: 'worker-loader',
@@ -74,7 +74,7 @@ module.exports = {
         ],
       },
       {
-        test: /\.js$/,
+        test: /\.(mjs|js|ts)$/,
         exclude: [/(node_modules)/, /(codecs)/],
         use: {
           loader: 'babel-loader',

packages/dicomImageLoader/config/webpack/webpack-dev.js → packages/dicomImageLoader/.webpack/webpack-dev.js

@@ -1,6 +1,5 @@
 const path = require('path');
-const webpack = require('webpack');
-const merge = require('./merge');
+const merge = require('webpack-merge');
 const baseConfig = require('./webpack-base');
 
 const devConfig = {

packages/dicomImageLoader/config/webpack/webpack-dynamic-import.js → packages/dicomImageLoader/.webpack/webpack-dynamic-import.js

@@ -6,7 +6,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 const outputPath = path.join(rootPath, 'dist', 'dynamic-import');
 
 const prodConfig = {
-  mode: 'production',
+  mode: 'development',
   stats: {
     children: true,
   },
@@ -20,12 +20,12 @@ const prodConfig = {
     filename: '[name].min.js',
   },
   optimization: {
-    // minimize: false,
-    minimizer: [
-      new TerserPlugin({
-        parallel: true,
-      }),
-    ],
+    minimize: false,
+    // minimizer: [
+    //   new TerserPlugin({
+    //     parallel: true,
+    //   }),
+    // ],
   },
 };
 

packages/dicomImageLoader/config/webpack/webpack-esm.js → packages/dicomImageLoader/.webpack/webpack-esm.js

@@ -1,7 +1,6 @@
 // Not used for now due to issues with experimental output modules
 const path = require('path');
 const webpack = require('webpack');
-
 const rootPath = process.cwd();
 const context = path.join(rootPath, 'src');
 const outputPath = path.join(rootPath, 'dist');
@@ -13,7 +12,7 @@ const config = {
   mode: 'development',
   context,
   entry: {
-    cornerstoneDICOMImageLoader: './imageLoader/index.js',
+    cornerstoneDICOMImageLoader: './imageLoader/index.ts',
   },
   target: 'web',
   output: {
@@ -36,6 +35,7 @@ const config = {
     },
   },
   resolve: {
+    extensions: ['.ts', '.js'],
     fallback: {
       fs: false,
       path: false,
@@ -58,7 +58,7 @@ const config = {
         type: 'asset/resource',
       },
       {
-        test: /\.js$/,
+        test: /\.(mjs|js|ts)$/,
         exclude: [/(node_modules)/, /(codecs)/],
         use: {
           loader: 'babel-loader',