fix: load relative subpath (#189)

* Build separate package/bundle for dynamic import

* formatting issues

* Update to node 22 for default build and node 18/20 for test

* Put scripts last so it is easy to cat the file and run scripts

* fix: Basic deploy working with slim and CS3D

* fix: Load path

* Try to fix build/test

* fix: Webworker load and icc transform

* Revert viewer test

* Revert version updates

* Downgrade minimatch for compatibility

* fix: Add a better relative path directory

Author: wayfarer3130

.github/workflows/publish.yml

@@ -10,7 +10,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: "20.x"
+          node-version: "22.x"
           registry-url: "https://registry.npmjs.org"
       - run: yarn install --frozen-lockfile
       - run: npm publish --access public

.github/workflows/unit-tests.yml

@@ -10,9 +10,10 @@ jobs:
   build:
     name: Build and run tests
     runs-on: ubuntu-latest
+    
     strategy:
       matrix:
-        node-version: ["16.x", "20.x"]
+        node-version: ["18.x", "24.x"]
 
     steps:
       - uses: actions/checkout@v2

.gitignore

@@ -69,4 +69,8 @@ dist/
 .env.local
 .env.development.local
 .env.test.local
-.env.production.local
+.env.production.local
+*~
+*.swp
+bun.lock
+*workspace

babel.config.js

@@ -1,17 +1,22 @@
 module.exports = {
   presets: [
-    ['@babel/preset-env', {
-      targets: {
-        browsers: ['ie 11']
-      }
-    }]
+    [
+      "@babel/preset-env",
+      {
+        targets: {
+          browsers: ["ie 11"],
+        },
+      },
+    ],
   ],
   plugins: [
-    ['@babel/plugin-transform-runtime',
+    "babel-plugin-transform-import-meta",
+    [
+      "@babel/plugin-transform-runtime",
       {
         regenerator: true,
-        corejs: 3
-      }
-    ]
-  ]
-}
+        corejs: 3,
+      },
+    ],
+  ],
+};

config/webpack/webpack-base.js

@@ -8,56 +8,50 @@ module.exports = {
   mode: 'development',
   context,
   stats: {
-    children: true
+    children: true,
   },
   entry: {
-    dicomMicroscopyViewer: './dicom-microscopy-viewer.js'
+    dicomMicroscopyViewer: './dicom-microscopy-viewer.js',
+    'dataLoader.worker': './webWorker/dataLoader.worker.js',
   },
   target: 'web',
   output: {
     library: {
       name: '[name]',
       type: 'umd',
-      umdNamedDefine: true
+      umdNamedDefine: true,
     },
     globalObject: 'this',
     path: outputPath,
-    publicPath: 'auto'
+    publicPath: 'auto',
   },
   devtool: 'source-map',
   resolve: {
     fallback: {
       fs: false,
-      path: false
-    }
+      path: false,
+      url: false,
+    },
   },
   module: {
     noParse: [/(codec)/, /(dicomicc)/],
     rules: [
       {
         test: /\.css$/,
-        use: 'css-loader'
+        use: 'css-loader',
       },
       {
         test: /\.wasm/,
-        type: 'asset/resource'
-      },
-      {
-        test: /\.worker\.js$/,
-        use: [
-          {
-            loader: 'worker-loader'
-          }
-        ]
+        type: 'asset/resource',
       },
       {
         test: /\.js$/,
         exclude: [/(node_modules)/, /(codecs)/, /(dicomicc)/],
         use: {
-          loader: 'babel-loader'
-        }
-      }
-    ]
+          loader: 'babel-loader',
+        },
+      },
+    ],
   },
-  plugins: [new webpack.ProgressPlugin()]
-}
+  plugins: [new webpack.ProgressPlugin()],
+};

config/webpack/webpack-bundle.js

@@ -11,70 +11,61 @@ module.exports = {
   mode: 'production',
   context,
   stats: {
-    children: true
+    children: true,
   },
   entry: {
-    dicomMicroscopyViewer: './dicom-microscopy-viewer.js'
+    dicomMicroscopyViewer: './dicom-microscopy-viewer.js',
+    'dataLoader.worker': './webWorker/dataLoader.worker.js',
   },
   target: 'web',
   output: {
     library: {
       name: 'dicomMicroscopyViewer',
       type: 'umd',
-      umdNamedDefine: true
+      umdNamedDefine: true,
     },
     globalObject: 'this',
     path: outputPath,
-    filename: '[name].bundle.min.js'
+    publicPath: 'auto',
+    filename: '[name].bundle.min.js',
   },
   devtool: 'source-map',
   resolve: {
     fallback: {
       fs: false,
-      path: false
-    }
+      path: false,
+      url: false,
+    },
   },
   module: {
     noParse: [/(codec)/, /(dicomicc)/],
     rules: [
       {
         test: /\.css$/,
-        use: 'css-loader'
+        use: 'css-loader',
       },
       {
         test: /\.wasm/,
-        type: 'asset/inline'
-      },
-      {
-        test: /\.worker\.js$/,
-        use: [
-          {
-            loader: 'worker-loader',
-            options: { inline: 'fallback' }
-          },
-          {
-            loader: 'babel-loader'
-          }
-        ]
+        type: 'asset/inline',
       },
       {
         test: /\.js$/,
         exclude: [/(node_modules)/, /(codecs)/, /(dicomicc)/],
         use: {
-          loader: 'babel-loader'
-        }
-      }
-    ]
+          loader: 'babel-loader',
+        },
+      },
+    ],
   },
   plugins: [new webpack.ProgressPlugin()],
   experiments: {
-    asyncWebAssembly: true
+    asyncWebAssembly: true,
   },
   optimization: {
     minimizer: [
       new TerserPlugin({
-        parallel: true
-      })
-    ]
-  }
-}
+        parallel: true,
+      }),
+    ],
+  },
+};

config/webpack/webpack-dynamic-import.js

@@ -10,32 +10,37 @@ const wasmRule = {
   test: /\.wasm/,
   type: 'asset/resource',
   generator: {
-    filename: 'dicom-microscopy-viewer/[name][ext]'
-  }
-}
+    filename: '[name][ext]',
+  },
+};
 
 const prodConfig = {
   mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
   stats: {
-    children: true
+    children: true,
   },
   output: {
     path: outputPath,
     libraryTarget: 'umd',
-    globalObject: 'window',
+    globalObject: 'self',
     filename: '[name].min.js',
+    publicPath: 'auto',
+    chunkFilename: '[name].worker.min.js'
   },
   module: {
-    rules: [wasmRule]
+    rules: [wasmRule],
   },
   optimization: {
     minimize: process.env.NODE_ENV === 'production',
     minimizer: [
       new TerserPlugin({
-        parallel: true
-      })
-    ]
-  }
-}
+        parallel: true,
+      }),
+    ],
+  },
+  experiments: {
+    asyncWebAssembly: true,
+  },
+};
 
 module.exports = merge(baseConfig, prodConfig)

jest.config.js

@@ -1,36 +1,34 @@
 module.exports = {
   verbose: true,
-  testEnvironment: 'jsdom',
-  roots: [
-    '<rootDir>',
-    '<rootDir>/src'
-  ],
-  moduleDirectories: [
-    'node_modules'
-  ],
-  moduleFileExtensions: ['js', 'wasm', 'json'],
+  testEnvironment: "jsdom",
+  roots: ["<rootDir>", "<rootDir>/src"],
+  moduleDirectories: ["node_modules"],
+  moduleFileExtensions: ["js", "wasm", "json"],
+
   transform: {
-    '^.+wasm.*\\.js$': '<rootDir>/src/__mocks__/emscriptenMock.js',
-    '^.+\\.js$': 'babel-jest',
-    '\\.(css|less|sass|scss)$': '<rootDir>/src/__mocks__/styleMock.js',
-    '\\.(wasm)$': '<rootDir>/src/__mocks__/wasmMock.js'
+    "^.+wasm.*\\.js$": "<rootDir>/src/__mocks__/emscriptenMock.js",
+    "^.+\\.js$": "babel-jest",
+    "\\.(css|less|sass|scss)$": "<rootDir>/src/__mocks__/styleMock.js",
+    "\\.(wasm)$": "<rootDir>/src/__mocks__/wasmMock.js",
   },
   transformIgnorePatterns: [
-    'node_modules/(?!(ol|@cornerstonejs|dicomicc|rbush|color-rgba|color-parse|color-name|color-space|quickselect|earcut)/)' // <- transform libraries
-  ],
-  testMatch: [
-    '<rootDir>/src/**/*.test.js'
-  ],
-  testPathIgnorePatterns: [
-    '<rootDir>/node_modules'
+    "node_modules/(?!(ol|@cornerstonejs|dicomicc|rbush|color-rgba|color-parse|color-name|color-space|quickselect|earcut)/)", // <- transform libraries
   ],
-  setupFiles: ['jest-canvas-mock'],
+  testMatch: ["<rootDir>/src/**/*.test.js"],
+  testPathIgnorePatterns: ["<rootDir>/node_modules"],
+  setupFiles: ["jest-canvas-mock"],
   moduleNameMapper: {
-    '@cornerstonejs/codec-libjpeg-turbo-8bit/decodewasmjs': '@cornerstonejs/codec-libjpeg-turbo-8bit/dist/libjpegturbowasm_decode',
-    '@cornerstonejs/codec-libjpeg-turbo-8bit/decodewasm': '@cornerstonejs/codec-libjpeg-turbo-8bit/dist/libjpegturbowasm_decode.wasm',
-    '@cornerstonejs/codec-charls/decodewasmjs': '@cornerstonejs/codec-charls/dist/charlswasm_decode.js',
-    '@cornerstonejs/codec-charls/decodewasm': '@cornerstonejs/codec-charls/dist/charlswasm_decode.wasm',
-    '@cornerstonejs/codec-openjpeg/decodewasmjs': '@cornerstonejs/codec-openjpeg/dist/openjpegwasm_decode.js',
-    '@cornerstonejs/codec-openjpeg/decodewasm': '@cornerstonejs/codec-openjpeg/dist/openjpegwasm_decode.wasm',
+    "@cornerstonejs/codec-libjpeg-turbo-8bit/decodewasmjs":
+      "@cornerstonejs/codec-libjpeg-turbo-8bit/dist/libjpegturbowasm_decode",
+    "@cornerstonejs/codec-libjpeg-turbo-8bit/decodewasm":
+      "@cornerstonejs/codec-libjpeg-turbo-8bit/dist/libjpegturbowasm_decode.wasm",
+    "@cornerstonejs/codec-charls/decodewasmjs":
+      "@cornerstonejs/codec-charls/dist/charlswasm_decode.js",
+    "@cornerstonejs/codec-charls/decodewasm":
+      "@cornerstonejs/codec-charls/dist/charlswasm_decode.wasm",
+    "@cornerstonejs/codec-openjpeg/decodewasmjs":
+      "@cornerstonejs/codec-openjpeg/dist/openjpegwasm_decode.js",
+    "@cornerstonejs/codec-openjpeg/decodewasm":
+      "@cornerstonejs/codec-openjpeg/dist/openjpegwasm_decode.wasm",
   },
-}
+};