From 6677326da2f80431793d7a2fc2808ab7cc4006d4 Mon Sep 17 00:00:00 2001 From: Bill Wallace Date: Mon, 12 Feb 2024 07:54:33 -0500 Subject: [PATCH 1/2] fix: Setup the dynamic import so it is separate from other packages The default setup for dynamic import was such that the libraries would overlap with other libraries having the same names, which caused version mismatches when using the dynamic import version. This change makes the path separate. As well, it allows a named load for the library, which means the library can actually be used natively in the browser again, fixing issues with deployment standalone. --- README.md | 11 ++ config/webpack/webpack-dynamic-import.js | 12 ++- package-lock.json | 125 ++++++++++++----------- package.json | 3 +- 4 files changed, 87 insertions(+), 64 deletions(-) diff --git a/README.md b/README.md index a92c6b50..7b2adf33 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,17 @@ Note that the *dicom-microscopy-viewer* package is **not** a viewer application, Below is an example for the most basic usage: a web page that displays a collection of DICOM VL Whole Slide Microscopy Image instances of a digital slide. For more advanced usage, take a look at the [Slim](https://github.com/imagingdatacommons/slim) viewer. +## Packaging + +The library is packaged as two different builds, one using dynamic import, and the other bundling into one +larger library. The dynamic import version uses a public path of `/dicom-microscopy-viewer/` so that they can be used by simply adding an alias to the appropriate version, and then deploying that version. In a straight web application, this can be loaded as: + +```javascript + const DICOMMicroscopyViewer = (await('/dicom-microscopy-viewer/dicomMicroscopyViewer.min.js')).default +``` + +The point of using the sub-directory here is to isolate the dependencies that unique to `dicom-microscopy-viewer`. + ### Basic usage The viewer can be embedded in any website, one only needs to diff --git a/config/webpack/webpack-dynamic-import.js b/config/webpack/webpack-dynamic-import.js index e9024854..46589fab 100644 --- a/config/webpack/webpack-dynamic-import.js +++ b/config/webpack/webpack-dynamic-import.js @@ -3,7 +3,7 @@ const merge = require('./merge') const rootPath = process.cwd() const baseConfig = require('./webpack-base') const TerserPlugin = require('terser-webpack-plugin') -const outputPath = path.join(rootPath, 'dist', 'dynamic-import') +const outputPath = path.join(rootPath, 'dist', 'dynamic-import', 'dicom-microscopy-viewer') const prodConfig = { mode: 'production', @@ -12,11 +12,15 @@ const prodConfig = { }, output: { path: outputPath, - libraryTarget: 'umd', - globalObject: 'this', - filename: '[name].min.js' + library: { + name: 'dicomMicroscopyViewer', + type: 'window', + }, + filename: '[name].min.js', + publicPath: '/dicom-microscopy-viewer/', }, optimization: { + // minimize: false, minimizer: [ new TerserPlugin({ parallel: true diff --git a/package-lock.json b/package-lock.json index 896f8eee..1786a860 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,6 @@ "@babel/plugin-transform-runtime": "^7.15.0", "@babel/preset-env": "^7.16", "@babel/runtime-corejs3": "^7.15.4", - "@webpack-cli/serve": "^1.5.2", "babel-eslint": "10.1.0", "babel-jest": "27.5", "babel-loader": "^8.2.3", @@ -44,7 +43,7 @@ "terser-webpack-plugin": "^5.2.2", "webpack": "^5.68", "webpack-bundle-analyzer": "^4.4.2", - "webpack-cli": "^4.9", + "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.9.0", "worker-loader": "^3.0.8" } @@ -3202,39 +3201,29 @@ } }, "node_modules/@webpack-cli/configtest": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.1.tgz", - "integrity": "sha512-1FBc1f9G4P/AxMqIgfZgeOTuRnwZMten8E7zap5zgpPInnCrP8D4Q81+4CWIch8i/Nf7nXjP0v6CjjbHOrXhKg==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz", + "integrity": "sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==", "dev": true, + "engines": { + "node": ">=14.15.0" + }, "peerDependencies": { - "webpack": "4.x.x || 5.x.x", - "webpack-cli": "4.x.x" + "webpack": "5.x.x", + "webpack-cli": "5.x.x" } }, "node_modules/@webpack-cli/info": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.4.1.tgz", - "integrity": "sha512-PKVGmazEq3oAo46Q63tpMr4HipI3OPfP7LiNOEJg963RMgT0rqheag28NCML0o3GIzA3DmxP1ZIAv9oTX1CUIA==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz", + "integrity": "sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==", "dev": true, - "dependencies": { - "envinfo": "^7.7.3" + "engines": { + "node": ">=14.15.0" }, "peerDependencies": { - "webpack-cli": "4.x.x" - } - }, - "node_modules/@webpack-cli/serve": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.1.tgz", - "integrity": "sha512-gNGTiTrjEVQ0OcVnzsRSqTxaBSr+dmTfm+qJsCDluky8uhdLWep7Gcr62QsAKHTMxjCS/8nEITsmFAhfIx+QSw==", - "dev": true, - "peerDependencies": { - "webpack-cli": "4.x.x" - }, - "peerDependenciesMeta": { - "webpack-dev-server": { - "optional": true - } + "webpack": "5.x.x", + "webpack-cli": "5.x.x" } }, "node_modules/@xtuc/ieee754": { @@ -5189,9 +5178,9 @@ } }, "node_modules/envinfo": { - "version": "7.8.1", - "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz", - "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==", + "version": "7.11.1", + "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.11.1.tgz", + "integrity": "sha512-8PiZgZNIB4q/Lw4AhOvAfB/ityHAd2bli3lESSWmWSzSsl5dKpy5N1d1Rfkd2teq/g9xN90lc6o98DOjMeYHpg==", "dev": true, "bin": { "envinfo": "dist/cli.js" @@ -7178,12 +7167,12 @@ } }, "node_modules/interpret": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz", - "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz", + "integrity": "sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==", "dev": true, "engines": { - "node": ">= 0.10" + "node": ">=10.13.0" } }, "node_modules/iota-array": { @@ -11338,15 +11327,15 @@ } }, "node_modules/rechoir": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz", - "integrity": "sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==", + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz", + "integrity": "sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==", "dev": true, "dependencies": { - "resolve": "^1.9.0" + "resolve": "^1.20.0" }, "engines": { - "node": ">= 0.10" + "node": ">= 10.13.0" } }, "node_modules/redent": { @@ -13251,40 +13240,42 @@ } }, "node_modules/webpack-cli": { - "version": "4.9.2", - "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.2.tgz", - "integrity": "sha512-m3/AACnBBzK/kMTcxWHcZFPrw/eQuY4Df1TxvIWfWM2x7mRqBQCqKEd96oCUa9jkapLBaFfRce33eGDb4Pr7YQ==", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz", + "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==", "dev": true, "dependencies": { "@discoveryjs/json-ext": "^0.5.0", - "@webpack-cli/configtest": "^1.1.1", - "@webpack-cli/info": "^1.4.1", - "@webpack-cli/serve": "^1.6.1", + "@webpack-cli/configtest": "^2.1.1", + "@webpack-cli/info": "^2.0.2", + "@webpack-cli/serve": "^2.0.5", "colorette": "^2.0.14", - "commander": "^7.0.0", - "execa": "^5.0.0", + "commander": "^10.0.1", + "cross-spawn": "^7.0.3", + "envinfo": "^7.7.3", "fastest-levenshtein": "^1.0.12", "import-local": "^3.0.2", - "interpret": "^2.2.0", - "rechoir": "^0.7.0", + "interpret": "^3.1.1", + "rechoir": "^0.8.0", "webpack-merge": "^5.7.3" }, "bin": { "webpack-cli": "bin/cli.js" }, "engines": { - "node": ">=10.13.0" + "node": ">=14.15.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" }, "peerDependencies": { - "webpack": "4.x.x || 5.x.x" + "webpack": "5.x.x" }, "peerDependenciesMeta": { "@webpack-cli/generators": { "optional": true }, - "@webpack-cli/migrate": { - "optional": true - }, "webpack-bundle-analyzer": { "optional": true }, @@ -13293,13 +13284,31 @@ } } }, + "node_modules/webpack-cli/node_modules/@webpack-cli/serve": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz", + "integrity": "sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==", + "dev": true, + "engines": { + "node": ">=14.15.0" + }, + "peerDependencies": { + "webpack": "5.x.x", + "webpack-cli": "5.x.x" + }, + "peerDependenciesMeta": { + "webpack-dev-server": { + "optional": true + } + } + }, "node_modules/webpack-cli/node_modules/commander": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", - "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz", + "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==", "dev": true, "engines": { - "node": ">= 10" + "node": ">=14" } }, "node_modules/webpack-dev-middleware": { diff --git a/package.json b/package.json index 685d7472..36347158 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,6 @@ "@babel/plugin-transform-runtime": "^7.15.0", "@babel/preset-env": "^7.16", "@babel/runtime-corejs3": "^7.15.4", - "@webpack-cli/serve": "^1.5.2", "babel-eslint": "10.1.0", "babel-jest": "27.5", "babel-loader": "^8.2.3", @@ -72,7 +71,7 @@ "terser-webpack-plugin": "^5.2.2", "webpack": "^5.68", "webpack-bundle-analyzer": "^4.4.2", - "webpack-cli": "^4.9", + "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.9.0", "worker-loader": "^3.0.8" }, From 8d0f92a7ad119f60ca7a0f0450fcb4aa3a8ab6da Mon Sep 17 00:00:00 2001 From: Bill Wallace Date: Mon, 12 Feb 2024 16:21:56 -0500 Subject: [PATCH 2/2] Add access to a few internals so that external features work --- src/viewer.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index 4a70cd8f..1cb42c32 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -686,7 +686,7 @@ function _getColorPaletteStyleForPointLayer ({ return { color: expression } } -const _affine = Symbol('affine') +const _affine = Symbol.for('affine') const _affineInverse = Symbol('affineInverse') const _annotationManager = Symbol('annotationManager') const _annotationGroups = Symbol('annotationGroups') @@ -697,8 +697,8 @@ const _drawingLayer = Symbol('drawingLayer') const _drawingSource = Symbol('drawingSource') const _features = Symbol('features') const _imageLayer = Symbol('imageLayer') -const _interactions = Symbol('interactions') -const _map = Symbol('map') +const _interactions = Symbol.for('interactions') +const _map = Symbol.for('map') const _mappings = Symbol('mappings') const _metadata = Symbol('metadata') const _opticalPaths = Symbol('opticalPaths')