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" }, 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')