fix: Setup the dynamic import so it is separate from other packages (#…

…113)

* 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.

* Add access to a few internals so that external features work

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

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

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

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')