fix: Allow the mode setup/creation to be async, and provide a few mor…

…e values to extension/app config/mode setup. (#4016)

.gitignore

@@ -10,6 +10,8 @@ junit.xml
 coverage/
 .docz/
 .yarn/
+.nx/
+addOns/yarn.lock
 
 # YALC (for Erik)
 .yalc

.webpack/webpack.base.js

@@ -7,7 +7,7 @@ const fs = require('fs');
 const webpack = require('webpack');
 
 // ~~ PLUGINS
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const TerserJSPlugin = require('terser-webpack-plugin');
 
 // ~~ PackageJSON
@@ -19,6 +19,8 @@ const loadWebWorkersRule = require('./rules/loadWebWorkers.js');
 const transpileJavaScriptRule = require('./rules/transpileJavaScript.js');
 const cssToJavaScript = require('./rules/cssToJavaScript.js');
 const stylusToJavaScript = require('./rules/stylusToJavaScript.js');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+
 
 // ~~ ENV VARS
 const NODE_ENV = process.env.NODE_ENV;
@@ -98,6 +100,14 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
     module: {
       noParse: [/(codec)/, /(dicomicc)/],
       rules: [
+        ...(isProdBuild ? [] : [{
+          test: /\.[jt]sx?$/,
+          exclude: /node_modules/,
+          loader: 'babel-loader',
+          options: {
+            plugins: ['react-refresh/babel'],
+          },
+        }]),
         {
           test: /\.svg?$/,
           oneOf: [
@@ -174,8 +184,6 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
         '@hooks': path.resolve(__dirname, '../platform/app/src/hooks'),
         '@routes': path.resolve(__dirname, '../platform/app/src/routes'),
         '@state': path.resolve(__dirname, '../platform/app/src/state'),
-        'dicom-microscopy-viewer':
-          'dicom-microscopy-viewer/dist/dynamic-import/dicomMicroscopyViewer.min.js',
         '@cornerstonejs/dicom-image-loader':
           '@cornerstonejs/dicom-image-loader/dist/dynamic-import/cornerstoneDICOMImageLoader.min.js',
       },
@@ -205,6 +213,7 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
       new webpack.ProvidePlugin({
         Buffer: ['buffer', 'Buffer'],
       }),
+      ...(isProdBuild ? [] : [new ReactRefreshWebpackPlugin()]),
       // Uncomment to generate bundle analyzer
       // new BundleAnalyzerPlugin(),
     ],

addOns/README.md

@@ -0,0 +1,3 @@
+# External Dependencies
+
+This module contains optional dependencies and external dependencies for including in OHIF, such as the DICOM Microscopy Viewer component.  

addOns/externals/devDependencies/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@externals/devDependencies",
+  "description": "External dev dependencies - put dev build dependencies here",
+  "version": "0.1.0",
+  "license": "MIT",
+  "private": true,
+  "engines": {
+    "node": ">=12",
+    "yarn": ">=1.19.1"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.20.13",
+    "@kitware/vtk.js": "30.4.1",
+    "moment": "^2.9.4",
+    "clsx": "^2.1.1",
+    "core-js": "^3.2.1"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
+    "@types/jest": "^27.5.0",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
+    "autoprefixer": "^10.4.4",
+    "babel-eslint": "9.x",
+    "babel-loader": "^8.2.4",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^9.0.1",
+    "cross-env": "^5.2.0",
+    "css-loader": "^6.8.1",
+    "dotenv": "^8.1.0",
+    "eslint": "^8.39.0",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-flowtype": "^7.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-promise": "^5.2.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.4.0",
+    "eslint-plugin-tsdoc": "^0.2.11",
+    "eslint-webpack-plugin": "^2.5.3",
+    "execa": "^8.0.1",
+    "extract-css-chunks-webpack-plugin": "^4.5.4",
+    "html-webpack-plugin": "^5.3.2",
+    "husky": "^3.0.0",
+    "jest": "^29.5.0",
+    "jest-canvas-mock": "^2.1.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-junit": "^6.4.0",
+    "lerna": "^8.1.3",
+    "lint-staged": "^9.0.2",
+    "mini-css-extract-plugin": "^2.1.0",
+    "optimize-css-assets-webpack-plugin": "^6.0.1",
+    "postcss": "^8.3.5",
+    "postcss-import": "^14.0.2",
+    "postcss-loader": "^6.1.1",
+    "postcss-preset-env": "^7.4.3",
+    "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.4",
+    "react-refresh": "^0.14.2",
+    "semver": "^7.5.1",
+    "serve": "^14.2.0",
+    "shader-loader": "^1.3.1",
+    "shx": "^0.3.3",
+    "source-map-loader": "^4.0.1",
+    "start-server-and-test": "^1.10.0",
+    "style-loader": "^1.0.0",
+    "stylus": "^0.59.0",
+    "stylus-loader": "^7.1.3",
+    "terser-webpack-plugin": "^5.1.4",
+    "typescript": "4.6.4",
+    "unused-webpack-plugin": "2.4.0",
+    "webpack": "^5.90.3",
+    "webpack-bundle-analyzer": "^4.8.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "4.7.3",
+    "webpack-hot-middleware": "^2.25.0",
+    "webpack-merge": "^5.7.3",
+    "workbox-webpack-plugin": "^6.1.5",
+    "worker-loader": "^3.0.8"
+  },
+  "scripts": {
+    "build": "Included as direct dependency"
+  }
+}

addOns/externals/dicom-microscopy-viewer/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@externals/dicom-microscopy-viewer",
+  "description": "External reference to dicom-microscopy-viewer",
+  "version": "0.46.1",
+  "license": "MIT",
+  "dependencies": {
+    "dicom-microscopy-viewer": "^0.46.1"
+  }
+}

addOns/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "ohif-monorepo-root",
+  "private": true,
+  "packageManager": "yarn@1.22.22",
+  "workspaces": {
+    "packages": [
+      "../platform/i18n",
+      "../platform/core",
+      "../platform/ui",
+      "../platform/ui-next",
+      "../platform/app",
+      "../extensions/*",
+      "../modes/*",
+      "../addOns/externals/*"
+    ],
+    "nohoist": [
+      "**/html-minifier-terser"
+    ]
+  },
+  "scripts": {
+    "preinstall": "cd .. && node preinstall.js"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.2",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-arrow-functions": "^7.16.7",
+    "@babel/plugin-transform-regenerator": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.23.2",
+    "@babel/plugin-transform-typescript": "^7.13.0",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.13.0"
+  },
+  "resolutions": {
+    "**/@babel/runtime": "^7.20.13",
+    "commander": "8.3.0",
+    "dcmjs": ">=0.33.0",
+    "dicomweb-client": ">=0.10.4",
+    "nth-check": "^2.1.1",
+    "trim-newlines": "^5.0.0",
+    "glob-parent": "^6.0.2",
+    "trim": "^1.0.0",
+    "package-json": "^8.1.0",
+    "typescript": "4.6.4",
+    "sharp": "^0.32.6"
+  }
+}

babel.config.js

@@ -51,7 +51,7 @@ module.exports = {
         '@babel/preset-react',
         '@babel/preset-typescript',
       ],
-      plugins: ['react-hot-loader/babel'],
+      plugins: ['react-refresh/babel'],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
     },
   },

extensions/cornerstone-dicom-rt/babel.config.js

@@ -37,7 +37,7 @@ module.exports = {
         '@babel/preset-react',
         '@babel/preset-typescript',
       ],
-      plugins: ['react-hot-loader/babel'],
+      plugins: ['react-refresh/babel'],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
     },
   },

extensions/cornerstone-dicom-rt/package.json

@@ -41,8 +41,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^10.11.0",
-    "react-router": "^6.3.0",
-    "react-router-dom": "^6.3.0"
+    "react-router": "^6.23.1",
+    "react-router-dom": "^6.23.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",

extensions/cornerstone-dicom-seg/babel.config.js

@@ -37,7 +37,7 @@ module.exports = {
         '@babel/preset-react',
         '@babel/preset-typescript',
       ],
-      plugins: ['react-hot-loader/babel'],
+      plugins: ['react-refresh/babel'],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
     },
   },

extensions/cornerstone-dicom-seg/package.json

@@ -41,14 +41,14 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^12.2.2",
-    "react-router": "^6.8.1",
-    "react-router-dom": "^6.8.1"
+    "react-router": "^6.23.1",
+    "react-router-dom": "^6.23.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.77.6",
-    "@cornerstonejs/core": "^1.77.6",
-    "@kitware/vtk.js": "30.4.1",
+    "@cornerstonejs/adapters": "^1.78.1",
+    "@cornerstonejs/core": "^1.78.1",
+    "@kitware/vtk.js": "*",
     "react-color": "^2.19.3"
   }
 }

extensions/cornerstone-dicom-sr/package.json

@@ -38,17 +38,17 @@
     "@ohif/extension-cornerstone": "3.9.0-beta.46",
     "@ohif/extension-measurement-tracking": "3.9.0-beta.46",
     "@ohif/ui": "3.9.0-beta.46",
-    "dcmjs": "^0.29.12",
+    "dcmjs": "*",
     "dicom-parser": "^1.8.9",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",
     "react": "^18.3.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.77.6",
-    "@cornerstonejs/core": "^1.77.6",
-    "@cornerstonejs/tools": "^1.77.6",
+    "@cornerstonejs/adapters": "^1.78.1",
+    "@cornerstonejs/core": "^1.78.1",
+    "@cornerstonejs/tools": "^1.78.1",
     "classnames": "^2.3.2"
   }
 }

extensions/cornerstone-dynamic-volume/package.json

@@ -34,17 +34,17 @@
     "@ohif/extension-default": "3.9.0-beta.46",
     "@ohif/i18n": "3.9.0-beta.46",
     "@ohif/ui": "3.9.0-beta.46",
-    "dcmjs": "^0.29.5",
+    "dcmjs": "*",
     "dicom-parser": "^1.8.21",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",
     "react": "^18.3.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/core": "^1.77.6",
-    "@cornerstonejs/streaming-image-volume-loader": "^1.77.6",
-    "@cornerstonejs/tools": "^1.77.6",
+    "@cornerstonejs/core": "^1.78.1",
+    "@cornerstonejs/streaming-image-volume-loader": "^1.78.1",
+    "@cornerstonejs/tools": "^1.78.1",
     "classnames": "^2.3.2"
   }
 }

extensions/cornerstone/package.json

@@ -38,11 +38,11 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.2",
     "@cornerstonejs/codec-openjph": "^2.4.2",
-    "@cornerstonejs/dicom-image-loader": "^1.77.6",
+    "@cornerstonejs/dicom-image-loader": "^1.78.1",
     "@icr/polyseg-wasm": "^0.4.0",
     "@ohif/core": "3.9.0-beta.46",
     "@ohif/ui": "3.9.0-beta.46",
-    "dcmjs": "^0.29.12",
+    "dcmjs": "*",
     "dicom-parser": "^1.8.21",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",
@@ -55,12 +55,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.77.6",
-    "@cornerstonejs/core": "^1.77.6",
-    "@cornerstonejs/streaming-image-volume-loader": "^1.77.6",
-    "@cornerstonejs/tools": "^1.77.6",
+    "@cornerstonejs/adapters": "^1.78.1",
+    "@cornerstonejs/core": "^1.78.1",
+    "@cornerstonejs/streaming-image-volume-loader": "^1.78.1",
+    "@cornerstonejs/tools": "^1.78.1",
     "@icr/polyseg-wasm": "^0.4.0",
-    "@kitware/vtk.js": "30.4.1",
+    "@kitware/vtk.js": "*",
     "html2canvas": "^1.4.1",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",

extensions/cornerstone/src/getToolbarModule.tsx

@@ -250,7 +250,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w
         const displaySets = displaySetUIDs.map(displaySetService.getDisplaySetByUID);
 
         const areReconstructable = displaySets.every(displaySet => {
-          return displaySet.isReconstructable;
+          return displaySet?.isReconstructable;
         });
 
         if (!areReconstructable) {

extensions/default/package.json

@@ -34,7 +34,7 @@
   "peerDependencies": {
     "@ohif/core": "3.9.0-beta.46",
     "@ohif/i18n": "3.9.0-beta.46",
-    "dcmjs": "^0.29.12",
+    "dcmjs": "*",
     "dicomweb-client": "^0.10.4",
     "prop-types": "^15.6.2",
     "react": "^18.3.1",

extensions/dicom-microscopy/.webpack/webpack.prod.js

@@ -43,7 +43,6 @@ module.exports = (env, argv) => {
     externals: [
       /\b(vtk.js)/,
       /\b(dcmjs)/,
-      /\b(dicom-microscopy-viewer)/,
       /\b(gl-matrix)/,
       /^@ohif/,
       /^@cornerstonejs/,

extensions/dicom-microscopy/babel.config.js

@@ -37,7 +37,7 @@ module.exports = {
         '@babel/preset-react',
         '@babel/preset-typescript',
       ],
-      plugins: ['react-hot-loader/babel'],
+      plugins: ['react-refresh/babel'],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
     },
   },