Feat: update dynamic imports (#181)

* Update dynamic import path

* Use umd

* Use dmv as public path

Author: igoroctaviano

README.md

@@ -30,6 +30,18 @@ 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

config/webpack/webpack-dynamic-import.js

@@ -3,20 +3,22 @@ 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',
+  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
   stats: {
     children: true
   },
   output: {
     path: outputPath,
     libraryTarget: 'umd',
     globalObject: 'window',
-    filename: '[name].min.js'
+    filename: '[name].min.js',
+    publicPath: '/dicom-microscopy-viewer/'
   },
   optimization: {
+    minimize: process.env.NODE_ENV === 'production',
     minimizer: [
       new TerserPlugin({
         parallel: true
@@ -25,4 +27,4 @@ const prodConfig = {
   }
 }
 
-module.exports = merge(baseConfig, prodConfig)
+module.exports = merge(baseConfig, prodConfig)

package.json

@@ -56,13 +56,12 @@
     "@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",
     "chai": "^4.3.4",
     "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "9.0.1",
+    "copy-webpack-plugin": "10.2.0",
     "core-js": "^3.17.2",
     "css-loader": "^6.7.1",
     "jest": "^27.5",
@@ -71,16 +70,16 @@
     "open-cli": "^7.0.1",
     "standard": "^17.0",
     "terser-webpack-plugin": "^5.2.2",
-    "webpack": "^5.68",
-    "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-cli": "^4.9",
-    "webpack-dev-server": "^4.9.0",
+    "webpack": "^5.94.0",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.2",
     "worker-loader": "^3.0.8"
   },
   "dependencies": {
     "@cornerstonejs/codec-charls": "^1.2.3",
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
-    "@cornerstonejs/codec-openjpeg": "^1.2.2",
+    "@cornerstonejs/codec-openjpeg": "^1.2.4",
     "@cornerstonejs/codec-openjph": "^2.4.5",
     "dicomweb-client": "^0.10.3",
     "colormap": "^2.3",

src/viewer.js

@@ -753,8 +753,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')