From 24c511f4bc04c4143bbd3d0d48029f41f7f36014 Mon Sep 17 00:00:00 2001 From: Bill Wallace Date: Fri, 5 Jul 2024 13:19:42 -0400 Subject: [PATCH] fix: webpack import bugs showing warnings on import (#4265) --- extensions/cornerstone-dicom-sr/package.json | 6 +- .../cornerstone-dynamic-volume/package.json | 6 +- extensions/cornerstone/package.json | 10 +- extensions/cornerstone/src/init.tsx | 7 +- .../src/DicomMicroscopyViewport.tsx | 12 +- .../dicom-microscopy/src/getPanelModule.tsx | 8 +- extensions/dicom-microscopy/src/index.tsx | 1 + .../src/services/MicroscopyService.ts | 11 +- .../dicom-microscopy/src/utils/loadSR.ts | 8 +- extensions/measurement-tracking/package.json | 4 +- platform/app/.webpack/webpack.pwa.js | 21 +- .../app/.webpack/writePluginImportsFile.js | 16 +- platform/app/pluginConfig.json | 6 + platform/app/public/html-templates/index.html | 6 + platform/app/src/appInit.js | 6 +- platform/core/package.json | 2 +- .../core/src/extensions/ExtensionManager.ts | 7 + platform/core/src/types/AppTypes.ts | 3 +- .../migration-guide/from-3p8-to-3p9-beta.md | 54 + platform/ui-next/.webpack/webpack.dev.js | 11 + platform/ui-next/.webpack/webpack.prod.js | 60 + platform/ui-next/package.json | 17 +- yarn.lock | 1701 ++++++++--------- 23 files changed, 975 insertions(+), 1008 deletions(-) create mode 100644 platform/ui-next/.webpack/webpack.dev.js create mode 100644 platform/ui-next/.webpack/webpack.prod.js diff --git a/extensions/cornerstone-dicom-sr/package.json b/extensions/cornerstone-dicom-sr/package.json index 119da93d3..c7d1fa14e 100644 --- a/extensions/cornerstone-dicom-sr/package.json +++ b/extensions/cornerstone-dicom-sr/package.json @@ -46,9 +46,9 @@ }, "dependencies": { "@babel/runtime": "^7.20.13", - "@cornerstonejs/adapters": "^1.81.6", - "@cornerstonejs/core": "^1.81.6", - "@cornerstonejs/tools": "^1.81.6", + "@cornerstonejs/adapters": "^1.82.0", + "@cornerstonejs/core": "^1.82.0", + "@cornerstonejs/tools": "^1.82.0", "classnames": "^2.3.2" } } diff --git a/extensions/cornerstone-dynamic-volume/package.json b/extensions/cornerstone-dynamic-volume/package.json index 7d0787b0d..eaa7d3ca3 100644 --- a/extensions/cornerstone-dynamic-volume/package.json +++ b/extensions/cornerstone-dynamic-volume/package.json @@ -42,9 +42,9 @@ }, "dependencies": { "@babel/runtime": "^7.20.13", - "@cornerstonejs/core": "^1.81.6", - "@cornerstonejs/streaming-image-volume-loader": "^1.81.6", - "@cornerstonejs/tools": "^1.81.6", + "@cornerstonejs/core": "^1.82.0", + "@cornerstonejs/streaming-image-volume-loader": "^1.82.0", + "@cornerstonejs/tools": "^1.82.0", "classnames": "^2.3.2" } } diff --git a/extensions/cornerstone/package.json b/extensions/cornerstone/package.json index 95a64ebeb..11e76c044 100644 --- a/extensions/cornerstone/package.json +++ b/extensions/cornerstone/package.json @@ -38,7 +38,7 @@ "@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.81.6", + "@cornerstonejs/dicom-image-loader": "^1.82.0", "@icr/polyseg-wasm": "^0.4.0", "@ohif/core": "3.9.0-beta.58", "@ohif/ui": "3.9.0-beta.58", @@ -55,10 +55,10 @@ }, "dependencies": { "@babel/runtime": "^7.20.13", - "@cornerstonejs/adapters": "^1.81.6", - "@cornerstonejs/core": "^1.81.6", - "@cornerstonejs/streaming-image-volume-loader": "^1.81.6", - "@cornerstonejs/tools": "^1.81.6", + "@cornerstonejs/adapters": "^1.82.0", + "@cornerstonejs/core": "^1.82.0", + "@cornerstonejs/streaming-image-volume-loader": "^1.82.0", + "@cornerstonejs/tools": "^1.82.0", "@icr/polyseg-wasm": "^0.4.0", "@kitware/vtk.js": "30.4.1", "html2canvas": "^1.4.1", diff --git a/extensions/cornerstone/src/init.tsx b/extensions/cornerstone/src/init.tsx index f7919ce9f..df0dc07c5 100644 --- a/extensions/cornerstone/src/init.tsx +++ b/extensions/cornerstone/src/init.tsx @@ -37,8 +37,8 @@ import { colormaps } from './utils/colormaps'; const { registerColormap } = csUtilities.colormap; // TODO: Cypress tests are currently grabbing this from the window? -window.cornerstone = cornerstone; -window.cornerstoneTools = cornerstoneTools; +(window as any).cornerstone = cornerstone; +(window as any).cornerstoneTools = cornerstoneTools; /** * */ @@ -46,7 +46,7 @@ export default async function init({ servicesManager, commandsManager, extensionManager, - appConfig, + appConfig }: Types.Extensions.ExtensionParams): Promise { // Note: this should run first before initializing the cornerstone // DO NOT CHANGE THE ORDER @@ -67,6 +67,7 @@ export default async function init({ preferSizeOverAccuracy: Boolean(appConfig.preferSizeOverAccuracy), useNorm16Texture: Boolean(appConfig.useNorm16Texture), }, + peerImport: appConfig.peerImport, }); // For debugging e2e tests that are failing on CI diff --git a/extensions/dicom-microscopy/src/DicomMicroscopyViewport.tsx b/extensions/dicom-microscopy/src/DicomMicroscopyViewport.tsx index adb306493..3ebe0c603 100644 --- a/extensions/dicom-microscopy/src/DicomMicroscopyViewport.tsx +++ b/extensions/dicom-microscopy/src/DicomMicroscopyViewport.tsx @@ -49,13 +49,6 @@ class DicomMicroscopyViewport extends Component { resizeRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]), }; - /** - * Need to return this as a function to prevent webpack from munging it. - */ - public static getImportPath() { - return '/dicom-microscopy-viewer/dicomMicroscopyViewer.min.js'; - } - /** * Get the nearest ROI from the mouse click point @@ -94,9 +87,8 @@ class DicomMicroscopyViewport extends Component { // you should only do this once. async installOpenLayersRenderer(container, displaySet) { const loadViewer = async metadata => { - await import( - /* webpackIgnore: true */ DicomMicroscopyViewport.getImportPath()); - const { viewer: DicomMicroscopyViewer, metadata: metadataUtils } = (window as any).dicomMicroscopyViewer; + const dicomMicroscopyModule = await this.microscopyService.importDicomMicroscopyViewer(); + const { viewer: DicomMicroscopyViewer, metadata: metadataUtils } = dicomMicroscopyModule; const microscopyViewer = DicomMicroscopyViewer.VolumeImageViewer; diff --git a/extensions/dicom-microscopy/src/getPanelModule.tsx b/extensions/dicom-microscopy/src/getPanelModule.tsx index e47c4c7dd..a515363aa 100644 --- a/extensions/dicom-microscopy/src/getPanelModule.tsx +++ b/extensions/dicom-microscopy/src/getPanelModule.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { CommandsManager, ExtensionManager } from '@ohif/core'; +import type { Types } from '@ohif/core'; import { useViewportGrid } from '@ohif/ui'; import MicroscopyPanel from './components/MicroscopyPanel/MicroscopyPanel'; @@ -12,11 +12,7 @@ export default function getPanelModule({ commandsManager, extensionManager, servicesManager, -}: { - servicesManager: AppTypes.ServicesManager; - commandsManager: CommandsManager; - extensionManager: ExtensionManager; -}) { +}: Types.Extensions.ExtensionParams) { const wrappedMeasurementPanel = () => { const [{ activeViewportId, viewports }] = useViewportGrid(); diff --git a/extensions/dicom-microscopy/src/index.tsx b/extensions/dicom-microscopy/src/index.tsx index 55b6004c7..ce8768745 100644 --- a/extensions/dicom-microscopy/src/index.tsx +++ b/extensions/dicom-microscopy/src/index.tsx @@ -44,6 +44,7 @@ const extension: Types.Extensions.Extension = { * that is provided by the Cornerstone extension in OHIF. */ getViewportModule({ servicesManager, extensionManager, commandsManager }) { + /** * * @param props {*} diff --git a/extensions/dicom-microscopy/src/services/MicroscopyService.ts b/extensions/dicom-microscopy/src/services/MicroscopyService.ts index be91cb6f2..e59f048af 100644 --- a/extensions/dicom-microscopy/src/services/MicroscopyService.ts +++ b/extensions/dicom-microscopy/src/services/MicroscopyService.ts @@ -22,8 +22,8 @@ export default class MicroscopyService extends PubSubService { return { name: 'microscopyService', altName: 'MicroscopyService', - create: ({ configuration = {} }) => { - return new MicroscopyService(servicesManager); + create: (props) => { + return new MicroscopyService(props); }, }; }; @@ -36,9 +36,10 @@ export default class MicroscopyService extends PubSubService { selectedAnnotation = null; pendingFocus = false; - constructor(servicesManager) { + constructor({ servicesManager, extensionManager }) { super(EVENTS); this.servicesManager = servicesManager; + this.peerImport = extensionManager.appConfig.peerImport; this._onRoiAdded = this._onRoiAdded.bind(this); this._onRoiModified = this._onRoiModified.bind(this); this._onRoiRemoved = this._onRoiRemoved.bind(this); @@ -69,6 +70,10 @@ export default class MicroscopyService extends PubSubService { }); } + public importDicomMicroscopyViewer(): Promise { + return this.peerImport("dicom-microscopy-viewer"); + } + /** * Observes when a ROI graphic is added, creating the correspondent annotation * with the current graphic and view state. diff --git a/extensions/dicom-microscopy/src/utils/loadSR.ts b/extensions/dicom-microscopy/src/utils/loadSR.ts index f7eff3261..c6d280230 100644 --- a/extensions/dicom-microscopy/src/utils/loadSR.ts +++ b/extensions/dicom-microscopy/src/utils/loadSR.ts @@ -2,7 +2,6 @@ import dcmjs from 'dcmjs'; import DCM_CODE_VALUES from './dcmCodeValues'; import toArray from './toArray'; -import DicomMicroscopyViewport from '../DicomMicroscopyViewport'; const MeasurementReport = dcmjs.adapters.DICOMMicroscopyViewer.MeasurementReport; @@ -24,7 +23,7 @@ export default async function loadSR( microscopySRDisplaySet.isLoaded = true; - const { rois, labels } = await _getROIsFromToolState(naturalizedDataset, FrameOfReferenceUID); + const { rois, labels } = await _getROIsFromToolState(microscopyService, naturalizedDataset, FrameOfReferenceUID); const managedViewer = managedViewers[0]; @@ -45,12 +44,11 @@ export default async function loadSR( } } -async function _getROIsFromToolState(naturalizedDataset, FrameOfReferenceUID) { +async function _getROIsFromToolState(microscopyService, naturalizedDataset, FrameOfReferenceUID) { const toolState = MeasurementReport.generateToolState(naturalizedDataset); const tools = Object.getOwnPropertyNames(toolState); // Does a dynamic import to prevent webpack from rebuilding the library - await import(/* webpackIgnore: true */ DicomMicroscopyViewport.getImportPath()); - const DICOMMicroscopyViewer = (window as any).dicomMicroscopyViewer; + const DICOMMicroscopyViewer = await microscopyService.importDicomMicroscopyViewer(); const measurementGroupContentItems = _getMeasurementGroups(naturalizedDataset); diff --git a/extensions/measurement-tracking/package.json b/extensions/measurement-tracking/package.json index f78da3ad9..b4ab8a53f 100644 --- a/extensions/measurement-tracking/package.json +++ b/extensions/measurement-tracking/package.json @@ -32,8 +32,8 @@ "start": "yarn run dev" }, "peerDependencies": { - "@cornerstonejs/core": "^1.81.6", - "@cornerstonejs/tools": "^1.81.6", + "@cornerstonejs/core": "^1.82.0", + "@cornerstonejs/tools": "^1.82.0", "@ohif/core": "3.9.0-beta.58", "@ohif/extension-cornerstone-dicom-sr": "3.9.0-beta.58", "@ohif/ui": "3.9.0-beta.58", diff --git a/platform/app/.webpack/webpack.pwa.js b/platform/app/.webpack/webpack.pwa.js index faeaae17a..69cc1e260 100644 --- a/platform/app/.webpack/webpack.pwa.js +++ b/platform/app/.webpack/webpack.pwa.js @@ -102,16 +102,17 @@ module.exports = (env, argv) => { to: `${DIST_DIR}/app-config.js`, }, // Copy Dicom Microscopy Viewer build files - { - from: '../../../node_modules/dicom-microscopy-viewer/dist/dynamic-import', - to: DIST_DIR, - globOptions: { - ignore: ['**/*.min.js.map'], - }, - // The dicom-microscopy-viewer is optional, so if it doeesn't get - // installed, it shouldn't cause issues. - noErrorOnMissing: true, - }, + // This is in pluginCOnfig.json now + // { + // from: '../../../node_modules/dicom-microscopy-viewer/dist/dynamic-import', + // to: DIST_DIR, + // globOptions: { + // ignore: ['**/*.min.js.map'], + // }, + // // The dicom-microscopy-viewer is optional, so if it doeesn't get + // // installed, it shouldn't cause issues. + // noErrorOnMissing: true, + // }, // Copy dicom-image-loader build files { from: '../../../node_modules/@cornerstonejs/dicom-image-loader/dist/dynamic-import', diff --git a/platform/app/.webpack/writePluginImportsFile.js b/platform/app/.webpack/writePluginImportsFile.js index 47456d034..c913e779e 100644 --- a/platform/app/.webpack/writePluginImportsFile.js +++ b/platform/app/.webpack/writePluginImportsFile.js @@ -66,6 +66,18 @@ function getRuntimeLoadModesExtensions(modules) { ); modules.forEach(module => { const packageName = extractName(module); + if (!packageName) { + return; + } + if (module.importPath) { + dynamicLoad.push( + ` if( module==="${packageName}") {`, + ` const imported = await window.browserImportFunction('${module.importPath}');`, + ' return ' + (module.globalName ? `window["${module.globalName}"];` : `imported["${module.importName || 'default'}"];`), + ' }' + ); + return; + } dynamicLoad.push( ` if( module==="${packageName}") {`, ` const imported = await import("${packageName}");`, @@ -73,8 +85,9 @@ function getRuntimeLoadModesExtensions(modules) { ' }' ); }); + // TODO - handle more cases for import than just default dynamicLoad.push( - ' return (await import(/* webpackIgnore: true */ module)).default;', + ' return (await window.browserImportFunction(module)).default;', '}\n', '// Import a list of items (modules or string names)', '// @return a Promise evaluating to a list of modules', @@ -144,6 +157,7 @@ function writePluginImportsFile(SRC_DIR, DIST_DIR) { pluginImportsJsContent += getRuntimeLoadModesExtensions([ ...pluginConfig.extensions, ...pluginConfig.modes, + ...pluginConfig.public, ]); fs.writeFileSync(`${SRC_DIR}/pluginImports.js`, pluginImportsJsContent, { flag: 'w+' }, err => { diff --git a/platform/app/pluginConfig.json b/platform/app/pluginConfig.json index a910bee9f..fc5f4f90f 100644 --- a/platform/app/pluginConfig.json +++ b/platform/app/pluginConfig.json @@ -88,6 +88,12 @@ "public": [ { "directory": "./platform/public" + }, + { + "packageName": "dicom-microscopy-viewer", + "importPath": "/dicom-microscopy-viewer/dicomMicroscopyViewer.min.js", + "globalName": "dicomMicroscopyViewer", + "directory": "./node_modules/dicom-microscopy-viewer/dist/dynamic-import" } ] } diff --git a/platform/app/public/html-templates/index.html b/platform/app/public/html-templates/index.html index d449a81e3..25e718e79 100644 --- a/platform/app/public/html-templates/index.html +++ b/platform/app/public/html-templates/index.html @@ -210,6 +210,12 @@ rel="preload" as="style" /> + +