feat: Update to use pnpm (#6031)
* Initial pnpm change * Install/update in pnpm sort of works * Attempt to fix install * fix pnpm * Refactor build process to use RSPack instead of Webpack across multiple extensions and modes. Update package.json scripts for development and production builds, and adjust webpack configuration files to accommodate new plugin imports and settings. * Update RSPack dependencies to version 2.0.0 across the project, enhancing compatibility and performance. Refactor webpack configuration in multiple extensions and modes to utilize the new library structure for UMD output. Adjust package.json scripts and settings for improved build processes. * Implement migration guide for OHIF 3.13, detailing the transition from Webpack to Rspack v2, the shift to pnpm workspaces, and the increase in minimum Node.js version to 24. Include new build commands, plugin replacements, and updates to package configurations across the monorepo. * Fix some dev:fast bugs * Move netlify to top level and remove webpack builds * Update version script to deal with lerna missing * chore(tests): Update multiple screenshot test images for various specs * feat(screenshot-reviewer): Add screenshot review tool and update package.json scripts * fix(DICOMSRDisplayTool): Improve actor presence check in viewport * chore(tests): Update multiple screenshot assets for various specs * chore(tests): Integrate waitForPaintToSettle and waitForViewportsRendered in multiple specs for improved rendering stability * chore(tests): Update screenshot assets for SEGHydration and SEGNoHydration specs * test: update progressive loading screenshots * jest 30 test fixes for compatibility with pnpm cs3d * Use correct setDisplaySets instead of setDataId * fix: Naming change for LegacyVolumeViewport3D * Update to allow tolerance for contour tests * update * fix * refactor: Replace instanceof checks with utility functions for viewport type validation * fix: Update createSegmentationForViewport to handle undefined displaySetInstanceUID gracefully * bun lock * chore(pnpm): align workspace setup to cornerstone3D and address PR review - .npmrc / pnpm-workspace.yaml: mirror cs3d (node-linker hoisted, strict-peer-dependencies=false, link/prefer workspace packages, minimumReleaseAge, frozenLockfile); sync axios 1.17.0 + tmp override - root: packageManager pnpm@11.4.0, engines pnpm >=11, wire preinstall.js - restore preinstall.js (token/private-repo + CLAUDE->AGENTS symlink) - playwright.yml: keep base CS3D-integration workflow, switch only the package manager (bun/yarn -> pnpm) and node 20 -> 24 - webpack.base.js: revert prod devtool to source-map (drop hidden-source-map) - remove @percy/cypress; .netlify + cli templates engines pnpm >=11 - Dockerfile pin pnpm@11; document tests/globalSetup.ts warmup - drop dicom-sr -> measurement-tracking edge (breaks pnpm cyclic dep) * chore(pnpm): regenerate lockfile and restore cs3d:* dev scripts - Regenerate pnpm-lock.yaml against the resolved workspace (cycle removed, cs3d 4.22.10, workspace:* internal deps). - Restore cs3d:checkout/check/build/watch/install/link/unlink helper scripts (dropped when taking the PR's root scripts), converted yarn -> pnpm since the local cornerstone3D checkout is now pnpm too. * Merge base branch issues * Link ohif app * ci: pin pnpm to 11.4.0 in action-setup (was version: latest) version: latest floats across runs and breaks reproducibility. Pin to the repo's packageManager version (pnpm@11.4.0) in both playwright and build-docs workflows. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix: Accidental commit of .npmrc config * Fix build issues * build fix * Dependency fixes * fix: Dependency bug in app on extensions/modes * Fix output configuration * Replace percy screenshots with native cypress * Remove percy screenshot entirely * fix: Build issues * force click to prevent canvas cover issues * Enable swiftshader * Update launch of electron * fix: Broken size calculation * Empty change to force a re-build * fix(cypress): generate ui-next tailwind classes; drop unsupported electron arg Tailwind only scanned @ohif/ui-next via ../../node_modules/@ohif/ui-next, which no longer resolves under the pnpm layout, so ui-next-unique classes (e.g. toolbar split-button sizing) were never generated. Those buttons' hit-boxes collapsed, producing Cypress 'covered by element' failures on toolbar interactions. Scan ui-next by direct filesystem path like ui/extensions/modes. Also stop pushing --enable-unsafe-swiftshader into Electron's launchOptions.args (Electron ignores it and warns); it is supplied via ELECTRON_EXTRA_LAUNCH_ARGS in CI. The arg is still pushed for non-electron chromium (local chrome). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * fix(e2e): disable dev-server overlay during coverage runs The rspack dev-server client overlay injects an iframe (id=rspack-dev-server-client-overlay) that intercepts pointer events, causing Playwright/Cypress clicks on toolbar buttons to time out (e.g. MicroscopyPanel). Disable the overlay when COVERAGE=true (e2e/Playwright webServer) while keeping it for normal local dev. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * fix(microscopy): provide dicom-microscopy-viewer runtime assets The microscopy viewer is loaded at runtime via peerImport('dicom-microscopy-viewer'), which fetches the copied asset served at /dicom-microscopy-viewer/. Two issues prevented those assets from reaching dist, so the viewer never initialized and drawing produced no measurement row: 1) dicom-microscopy-viewer was declared in no workspace package.json (only under libs/@cornerstonejs), so it was not installed at root node_modules and the pluginConfig copy source did not exist. Declare it (0.48.6, matching libs) in the microscopy extension. 2) createCopyPluginToDist appended the public/dist folder name to entries that specify an explicit directory, breaking the dicom-microscopy-viewer public entry (looked for .../dynamic-import/public). Use an explicit directory as-is; only append the folder name for package-derived entries. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * Update to pnpm 11.5.2 and cs3d 5.0.2 * Lock file * fix: Update to newer versions of actions to try to fix hang * Remove unnecessary version * fix: Tests that are flaky * PR comments * Incorrect run name * docs: Explain pluginConfig tooling * Updated notes on pluginConfig and PR comments * fix: resolve plugins in rsbuild build and fix directory-based asset copy rsbuild.config.ts: merge getPluginResolveAliases() and an @ohif/app$ alias into resolve.alias, and add resolve.modules (root, platform/app, platform/ui node_modules) so extensions resolve their shared @ohif/* imports. Brings the rsbuild (dev:fast) path to parity with webpack.pwa.js / webpack.base.js. writePluginImportsFile.js: treat a 'directory' on an extension/mode entry as the package root and copy its public/ and dist/ subdirs instead of the whole directory; public-section entries keep copying their directory verbatim via a new literalDirectory flag. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor: share resolve alias/modules between webpack and rsbuild configs Extract the resolve.alias (@ohif/app, @, @components, ...) and the node_modules search paths into .webpack/resolveConfig.js, the single source of truth consumed by both webpack.base.js (and every per-package webpack.prod/.dev.js that merges it) and rsbuild.config.ts. getModules(srcDir) appends the building package's own source root, preserving the previous per-package behavior. Ends the drift where the rsbuild path kept missing aliases/module paths that webpack.base.js already had. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * Add a timeout on git fetch and avoid all the unnecessary mirrros * PR comments and tests * Remove cache to prevent corrupting the cache key/setup. * Fix stale/corrupted pnpm installer --------- Co-authored-by: Alireza <ar.sedghi@gmail.com> Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
126 files changed
+31623
-55381
No files matched your search
@@ -1,35 +0,0 @@
|
||||
const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin');
|
||||
|
||||
function extractStyleChunks(isProdBuild) {
|
||||
return [
|
||||
// If you are using the old stylus, you should uncomment this
|
||||
// {
|
||||
// test: /\.styl$/,
|
||||
// use: [
|
||||
// {
|
||||
// loader: ExtractCssChunksPlugin.loader,
|
||||
// options: {
|
||||
// hot: !isProdBuild,
|
||||
// },
|
||||
// },
|
||||
// { loader: 'css-loader' },
|
||||
// { loader: 'stylus-loader' },
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
test: /\.(sa|sc|c)ss$/,
|
||||
use: [
|
||||
{
|
||||
loader: ExtractCssChunksPlugin.loader,
|
||||
options: {
|
||||
hot: !isProdBuild,
|
||||
},
|
||||
},
|
||||
'css-loader',
|
||||
'postcss-loader',
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
module.exports = extractStyleChunks;
|
||||
@@ -1,15 +1,10 @@
|
||||
// https://developers.google.com/web/tools/workbox/guides/codelabs/webpack
|
||||
// ~~ WebPack
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const { merge } = require('webpack-merge');
|
||||
const webpack = require('webpack');
|
||||
const rspack = require('@rspack/core');
|
||||
const webpackBase = require('./../../../.webpack/webpack.base.js');
|
||||
// ~~ Plugins
|
||||
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const { InjectManifest } = require('workbox-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
// ~~ Directories
|
||||
const SRC_DIR = path.join(__dirname, '../src');
|
||||
const DIST_DIR = path.join(__dirname, '../dist');
|
||||
@@ -31,13 +26,61 @@ const IS_COVERAGE = process.env.COVERAGE === 'true';
|
||||
|
||||
const OHIF_PORT = Number(process.env.OHIF_PORT || 3000);
|
||||
const ENTRY_TARGET = process.env.ENTRY_TARGET || `${SRC_DIR}/index.js`;
|
||||
const Dotenv = require('dotenv-webpack');
|
||||
const dotenv = require('dotenv');
|
||||
dotenv.config();
|
||||
const writePluginImportFile = require('./writePluginImportsFile.js');
|
||||
// const MillionLint = require('@million/lint');
|
||||
const open = process.env.OHIF_OPEN !== 'false';
|
||||
|
||||
const copyPluginFromExtensions = writePluginImportFile(SRC_DIR, DIST_DIR);
|
||||
|
||||
class InjectServiceWorkerManifestPlugin {
|
||||
constructor({ swSrc, swDest, publicPath, exclude, maximumFileSizeToCacheInBytes }) {
|
||||
this.swSrc = swSrc;
|
||||
this.swDest = swDest;
|
||||
this.publicPath = publicPath;
|
||||
this.exclude = exclude;
|
||||
this.maximumFileSizeToCacheInBytes = maximumFileSizeToCacheInBytes;
|
||||
}
|
||||
|
||||
apply(compiler) {
|
||||
const pluginName = 'InjectServiceWorkerManifestPlugin';
|
||||
const publicPath = this.publicPath.endsWith('/') ? this.publicPath : `${this.publicPath}/`;
|
||||
|
||||
compiler.hooks.thisCompilation.tap(pluginName, compilation => {
|
||||
compilation.hooks.processAssets.tap(
|
||||
{
|
||||
name: pluginName,
|
||||
stage: rspack.Compilation.PROCESS_ASSETS_STAGE_REPORT,
|
||||
},
|
||||
() => {
|
||||
const manifest = compilation
|
||||
.getAssets()
|
||||
.filter(asset => {
|
||||
if (asset.name === this.swDest || asset.name.endsWith('.map')) {
|
||||
return false;
|
||||
}
|
||||
if (this.exclude.some(pattern => pattern.test(asset.name))) {
|
||||
return false;
|
||||
}
|
||||
return asset.source.size() <= this.maximumFileSizeToCacheInBytes;
|
||||
})
|
||||
.map(asset => ({
|
||||
url: `${publicPath}${asset.name}`,
|
||||
revision: asset.info.contenthash ? null : compilation.hash,
|
||||
}));
|
||||
|
||||
const source = fs
|
||||
.readFileSync(this.swSrc, 'utf8')
|
||||
.replace('self.__WB_MANIFEST', JSON.stringify(manifest));
|
||||
|
||||
compilation.emitAsset(this.swDest, new rspack.sources.RawSource(source));
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const setHeaders = (res, path) => {
|
||||
if (path.indexOf('.gz') !== -1) {
|
||||
res.setHeader('Content-Encoding', 'gzip');
|
||||
@@ -67,6 +110,7 @@ module.exports = (env, argv) => {
|
||||
app: ENTRY_TARGET,
|
||||
},
|
||||
output: {
|
||||
clean: true,
|
||||
path: DIST_DIR,
|
||||
filename: isProdBuild ? '[name].bundle.[chunkhash].js' : '[name].js',
|
||||
publicPath: PUBLIC_URL, // Used by HtmlWebPackPlugin for asset prefix
|
||||
@@ -79,22 +123,22 @@ module.exports = (env, argv) => {
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
// Resolve every extension/mode declared in pluginConfig.json to its
|
||||
// workspace source, so the dynamic import()s in pluginImports.js link
|
||||
// without the plugins being dependencies of platform/app. Merged with the
|
||||
// base aliases (webpack-merge deep-merges resolve.alias).
|
||||
alias: writePluginImportFile.getPluginResolveAliases(),
|
||||
modules: [
|
||||
// Modules specific to this package
|
||||
// Preserve importer-relative node_modules walk-up for pnpm.
|
||||
'node_modules',
|
||||
path.resolve(__dirname, '../node_modules'),
|
||||
// Hoisted Yarn Workspace Modules
|
||||
path.resolve(__dirname, '../../../node_modules'),
|
||||
SRC_DIR,
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
// For debugging re-renders
|
||||
// MillionLint.webpack(),
|
||||
new Dotenv(),
|
||||
// Clean output.path
|
||||
new CleanWebpackPlugin(),
|
||||
// Copy "Public" Folder to Dist
|
||||
new CopyWebpackPlugin({
|
||||
// Copy "Public" Folder to Dist (rspack built-in)
|
||||
new rspack.CopyRspackPlugin({
|
||||
patterns: [
|
||||
...copyPluginFromExtensions,
|
||||
{
|
||||
@@ -102,8 +146,6 @@ module.exports = (env, argv) => {
|
||||
to: DIST_DIR,
|
||||
toType: 'dir',
|
||||
globOptions: {
|
||||
// Ignore our HtmlWebpackPlugin template file
|
||||
// Ignore our configuration files
|
||||
ignore: ['**/config/**', '**/html-templates/**', '.DS_Store'],
|
||||
},
|
||||
},
|
||||
@@ -111,37 +153,33 @@ module.exports = (env, argv) => {
|
||||
from: '../../../node_modules/onnxruntime-web/dist',
|
||||
to: `${DIST_DIR}/ort`,
|
||||
},
|
||||
// Short term solution to make sure GCloud config is available in output
|
||||
// for our docker implementation
|
||||
{
|
||||
from: `${PUBLIC_DIR}/config/google.js`,
|
||||
to: `${DIST_DIR}/google.js`,
|
||||
},
|
||||
// Copy over and rename our target app config file
|
||||
{
|
||||
from: `${PUBLIC_DIR}/${APP_CONFIG}`,
|
||||
to: `${DIST_DIR}/app-config.js`,
|
||||
},
|
||||
],
|
||||
}),
|
||||
// Generate "index.html" w/ correct includes/imports
|
||||
new HtmlWebpackPlugin({
|
||||
// Generate "index.html" w/ correct includes/imports (rspack built-in)
|
||||
new rspack.HtmlRspackPlugin({
|
||||
template: `${PUBLIC_DIR}/html-templates/${HTML_TEMPLATE}`,
|
||||
filename: 'index.html',
|
||||
templateParameters: {
|
||||
PUBLIC_URL: PUBLIC_URL,
|
||||
},
|
||||
}),
|
||||
// Generate a service worker for fast local loads
|
||||
// Generate a service worker for fast local loads.
|
||||
...(IS_COVERAGE
|
||||
? []
|
||||
: [
|
||||
new InjectManifest({
|
||||
new InjectServiceWorkerManifestPlugin({
|
||||
swDest: 'sw.js',
|
||||
swSrc: path.join(SRC_DIR, 'service-worker.js'),
|
||||
// Need to exclude the theme as it is updated independently
|
||||
publicPath: PUBLIC_URL,
|
||||
exclude: [/theme/],
|
||||
// Cache large files for the manifests to avoid warning messages
|
||||
maximumFileSizeToCacheInBytes: 1024 * 1024 * 50,
|
||||
}),
|
||||
]),
|
||||
@@ -156,11 +194,15 @@ module.exports = (env, argv) => {
|
||||
open,
|
||||
port: OHIF_PORT,
|
||||
client: {
|
||||
overlay: { errors: true, warnings: false },
|
||||
// During e2e (COVERAGE=true) disable the dev-server overlay: its
|
||||
// injected iframe intercepts pointer events and breaks Playwright/Cypress
|
||||
// clicks. Keep it for normal local dev.
|
||||
overlay: IS_COVERAGE ? false : { errors: true, warnings: false },
|
||||
},
|
||||
proxy: [
|
||||
{
|
||||
'/dicomweb': 'http://localhost:5000',
|
||||
context: ['/dicomweb'],
|
||||
target: 'http://localhost:5000',
|
||||
},
|
||||
],
|
||||
static: [
|
||||
@@ -173,13 +215,15 @@ module.exports = (env, argv) => {
|
||||
setHeaders,
|
||||
},
|
||||
publicPath: '/viewer-testdata',
|
||||
watch: false,
|
||||
},
|
||||
],
|
||||
//public: 'http://localhost:' + 3000,
|
||||
//writeToDisk: true,
|
||||
historyApiFallback: {
|
||||
disableDotRule: true,
|
||||
disableDotRule: !IS_COVERAGE,
|
||||
index: PUBLIC_URL + 'index.html',
|
||||
htmlAcceptHeaders: ['text/html'],
|
||||
},
|
||||
devMiddleware: {
|
||||
writeToDisk: true,
|
||||
@@ -203,7 +247,7 @@ module.exports = (env, argv) => {
|
||||
|
||||
if (isProdBuild) {
|
||||
mergedConfig.plugins.push(
|
||||
new MiniCssExtractPlugin({
|
||||
new rspack.CssExtractRspackPlugin({
|
||||
filename: '[name].bundle.css',
|
||||
chunkFilename: '[id].css',
|
||||
})
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
const pluginConfig = require('../pluginConfig.json');
|
||||
const fs = require('fs');
|
||||
const os = require('os');
|
||||
const path = require('path');
|
||||
|
||||
const autogenerationDisclaimer = `
|
||||
// THIS FILE IS AUTOGENERATED AS PART OF THE EXTENSION AND MODE PLUGIN PROCESS.
|
||||
@@ -107,20 +108,144 @@ function getRuntimeLoadModesExtensions(modules) {
|
||||
return dynamicLoad.join('\n');
|
||||
}
|
||||
|
||||
const fromDirectory = (srcDir, path) => {
|
||||
if (!path) return;
|
||||
if (path[0] === '.') return srcDir + '/../../..' + path.substring(1);
|
||||
if (path[0] === '~') return os.homedir() + path.substring(1);
|
||||
return path;
|
||||
const fromDirectory = (srcDir, dirPath) => {
|
||||
if (!dirPath) return;
|
||||
if (dirPath[0] === '.') return srcDir + '/../../..' + dirPath.substring(1);
|
||||
if (dirPath[0] === '~') return os.homedir() + dirPath.substring(1);
|
||||
return dirPath;
|
||||
};
|
||||
|
||||
const createCopyPluginToDistForLink = (srcDir, distDir, plugins, folderName) => {
|
||||
const APP_SRC_DIR = path.resolve(__dirname, '../src');
|
||||
const REPO_ROOT = path.resolve(__dirname, '../../../');
|
||||
|
||||
// The set of plugin package names declared in pluginConfig.json. Resolution and
|
||||
// asset copying are driven entirely by this list — a package present in the
|
||||
// extensions/ or modes/ workspaces but NOT listed here is ignored, and an
|
||||
// external (out-of-tree) package listed here with a `directory` is included.
|
||||
let declaredPluginNamesCache;
|
||||
function getDeclaredPluginNames() {
|
||||
if (declaredPluginNamesCache) {
|
||||
return declaredPluginNamesCache;
|
||||
}
|
||||
const names = new Set();
|
||||
for (const entry of [...(pluginConfig.extensions || []), ...(pluginConfig.modes || [])]) {
|
||||
const name = extractName(entry);
|
||||
if (name) {
|
||||
names.add(name);
|
||||
}
|
||||
}
|
||||
declaredPluginNamesCache = names;
|
||||
return names;
|
||||
}
|
||||
|
||||
// Map each in-tree plugin's real package name to its directory, but ONLY for the
|
||||
// plugins declared in pluginConfig.json. This lets the bundler resolve those
|
||||
// plugins from their source without them being dependencies of platform/app
|
||||
// (and therefore without entries in package.json / the lockfile), while leaving
|
||||
// undeclared workspace packages out of the build entirely.
|
||||
let workspacePluginDirsCache;
|
||||
function getWorkspacePluginDirs() {
|
||||
if (workspacePluginDirsCache) {
|
||||
return workspacePluginDirsCache;
|
||||
}
|
||||
const declared = getDeclaredPluginNames();
|
||||
const map = {};
|
||||
for (const group of ['extensions', 'modes']) {
|
||||
const root = path.join(REPO_ROOT, group);
|
||||
if (!fs.existsSync(root)) {
|
||||
continue;
|
||||
}
|
||||
for (const dir of fs.readdirSync(root)) {
|
||||
const pkgJsonPath = path.join(root, dir, 'package.json');
|
||||
if (!fs.existsSync(pkgJsonPath)) {
|
||||
continue;
|
||||
}
|
||||
try {
|
||||
const { name } = JSON.parse(fs.readFileSync(pkgJsonPath, 'utf8'));
|
||||
if (name && declared.has(name)) {
|
||||
map[name] = path.join(root, dir);
|
||||
}
|
||||
} catch {
|
||||
// ignore an unparseable package.json
|
||||
}
|
||||
}
|
||||
}
|
||||
workspacePluginDirsCache = map;
|
||||
return map;
|
||||
}
|
||||
|
||||
// Source directory of a workspace plugin: an explicit `directory` override wins
|
||||
// (out-of-tree plugins), otherwise look it up among the in-tree workspaces by
|
||||
// package name. Returns undefined for an external plugin that is instead
|
||||
// installed as a normal dependency (resolved from node_modules — see
|
||||
// pluginAssetDir and getPluginResolveAliases).
|
||||
function workspacePluginDir(plugin) {
|
||||
if (plugin.directory) {
|
||||
return fromDirectory(APP_SRC_DIR, plugin.directory);
|
||||
}
|
||||
return getWorkspacePluginDirs()[extractName(plugin)];
|
||||
}
|
||||
|
||||
// Where a plugin's copyable assets (public/, dist/) live. In-tree and
|
||||
// `directory`-overridden plugins use their source dir; anything else declared
|
||||
// in pluginConfig falls back to node_modules. This is what lets an external
|
||||
// extension/mode be included by adding it to the root package.json as a normal
|
||||
// dependency (e.g. third-party packages such as dicom-microscopy-viewer).
|
||||
function pluginAssetDir(plugin) {
|
||||
const dir = workspacePluginDir(plugin);
|
||||
if (dir) {
|
||||
return dir;
|
||||
}
|
||||
const name = extractName(plugin);
|
||||
const inNodeModules = name && path.join(REPO_ROOT, 'node_modules', name);
|
||||
return inNodeModules && fs.existsSync(inNodeModules) ? inNodeModules : undefined;
|
||||
}
|
||||
|
||||
// Alias map fed into webpack `resolve.alias`. The trailing `$` makes each alias
|
||||
// an EXACT match for the bare package specifier that the generated
|
||||
// pluginImports.js imports, so deep subpath imports (e.g.
|
||||
// `@ohif/extension-cornerstone/types`) still flow through normal resolution and
|
||||
// honor each package's `exports` map.
|
||||
//
|
||||
// Only in-tree / `directory`-overridden plugins get an alias. An external
|
||||
// plugin installed as a root dependency intentionally gets none: its bare
|
||||
// specifier then resolves through webpack's normal node_modules walk-up
|
||||
// (resolve.modules includes the repo-root node_modules), exactly like any other
|
||||
// installed package.
|
||||
function getPluginResolveAliases() {
|
||||
const alias = {};
|
||||
for (const entry of [...(pluginConfig.extensions || []), ...(pluginConfig.modes || [])]) {
|
||||
const name = extractName(entry);
|
||||
const dir = workspacePluginDir(entry);
|
||||
if (name && dir) {
|
||||
alias[`${name}$`] = dir;
|
||||
}
|
||||
}
|
||||
return alias;
|
||||
}
|
||||
|
||||
// Build CopyPlugin patterns for a set of plugins.
|
||||
//
|
||||
// For `public`-section entries (literalDirectory=true) a `directory` is the
|
||||
// asset source itself — e.g. `./platform/public` or
|
||||
// dicom-microscopy-viewer's prebuilt dist folder — so it is copied directly.
|
||||
//
|
||||
// For extension/mode entries a `directory` is instead the package ROOT (it
|
||||
// doubles as the resolve alias target), so we copy its <folderName> (public/
|
||||
// or dist/) subdirectory, exactly as we do for in-tree and node_modules
|
||||
// plugins. This keeps an out-of-tree extension's assets landing in the same
|
||||
// place as an in-tree one.
|
||||
const createCopyPluginToDist = (distDir, plugins, folderName, { literalDirectory = false } = {}) => {
|
||||
return plugins
|
||||
.map(plugin => {
|
||||
const fromDir = fromDirectory(srcDir, plugin.directory);
|
||||
const from = fromDir || `${srcDir}/../node_modules/${plugin.packageName}/${folderName}/`;
|
||||
const exists = fs.existsSync(from);
|
||||
return exists
|
||||
let from;
|
||||
if (literalDirectory && plugin.directory) {
|
||||
from = fromDirectory(APP_SRC_DIR, plugin.directory);
|
||||
} else {
|
||||
const dir = pluginAssetDir(plugin);
|
||||
from = dir && path.join(dir, folderName);
|
||||
}
|
||||
return from && fs.existsSync(from)
|
||||
? {
|
||||
from,
|
||||
to: `${distDir}${plugin.to || ''}`,
|
||||
@@ -128,23 +253,7 @@ const createCopyPluginToDistForLink = (srcDir, distDir, plugins, folderName) =>
|
||||
}
|
||||
: undefined;
|
||||
})
|
||||
.filter(x => !!x);
|
||||
};
|
||||
|
||||
const createCopyPluginToDistForBuild = (SRC_DIR, DIST_DIR, plugins, folderName) => {
|
||||
return plugins
|
||||
.map(plugin => {
|
||||
const from = `${SRC_DIR}/../../../node_modules/${plugin.packageName}/${folderName}/`;
|
||||
const exists = fs.existsSync(from);
|
||||
return exists
|
||||
? {
|
||||
from,
|
||||
to: DIST_DIR,
|
||||
toType: 'dir',
|
||||
}
|
||||
: undefined;
|
||||
})
|
||||
.filter(x => !!x);
|
||||
.filter(Boolean);
|
||||
};
|
||||
|
||||
function writePluginImportsFile(SRC_DIR, DIST_DIR) {
|
||||
@@ -175,46 +284,35 @@ function writePluginImportsFile(SRC_DIR, DIST_DIR) {
|
||||
}
|
||||
});
|
||||
|
||||
// Build packages using cli add-mode and add-extension
|
||||
// will get added to the root node_modules, but the linked packages
|
||||
// will be hosted at the viewer node_modules.
|
||||
|
||||
const copyPluginPublicToDistBuild = createCopyPluginToDistForBuild(
|
||||
SRC_DIR,
|
||||
// Copy each extension/mode's static `public/` assets into the app dist.
|
||||
// Plugins are resolved from their source dir (see pluginAssetDir), so this
|
||||
// works whether they are in-tree, out-of-tree (`directory`), or installed as
|
||||
// dependencies of platform/app.
|
||||
const copyPluginPublicToDist = createCopyPluginToDist(
|
||||
DIST_DIR,
|
||||
[...pluginConfig.modes, ...pluginConfig.extensions],
|
||||
'public'
|
||||
);
|
||||
|
||||
const copyPluginPublicToDistLink = createCopyPluginToDistForLink(
|
||||
SRC_DIR,
|
||||
DIST_DIR,
|
||||
[...pluginConfig.modes, ...pluginConfig.extensions, ...pluginConfig.public],
|
||||
'public'
|
||||
);
|
||||
|
||||
// Temporary way to copy chunks from the dist folder so that the become
|
||||
// available
|
||||
const copyPluginDistToDistBuild = createCopyPluginToDistForBuild(
|
||||
SRC_DIR,
|
||||
// Some extensions/modes ship prebuilt chunks/workers/wasm in dist/; copy them
|
||||
// if present.
|
||||
const copyPluginDistToDist = createCopyPluginToDist(
|
||||
DIST_DIR,
|
||||
[...pluginConfig.modes, ...pluginConfig.extensions],
|
||||
'dist'
|
||||
);
|
||||
|
||||
const copyPluginDistToDistLink = createCopyPluginToDistForLink(
|
||||
SRC_DIR,
|
||||
// `public`-section entries (e.g. ./platform/public, dicom-microscopy-viewer)
|
||||
// point `directory` at the asset folder itself, so copy it verbatim.
|
||||
const copyPublicSectionToDist = createCopyPluginToDist(
|
||||
DIST_DIR,
|
||||
[...pluginConfig.modes, ...pluginConfig.extensions],
|
||||
'dist'
|
||||
pluginConfig.public || [],
|
||||
'public',
|
||||
{ literalDirectory: true }
|
||||
);
|
||||
|
||||
return [
|
||||
...copyPluginPublicToDistBuild,
|
||||
...copyPluginPublicToDistLink,
|
||||
...copyPluginDistToDistBuild,
|
||||
...copyPluginDistToDistLink,
|
||||
];
|
||||
return [...copyPluginPublicToDist, ...copyPluginDistToDist, ...copyPublicSectionToDist];
|
||||
}
|
||||
|
||||
module.exports = writePluginImportsFile;
|
||||
module.exports.getPluginResolveAliases = getPluginResolveAliases;
|
||||
@@ -7,13 +7,20 @@ export default defineConfig({
|
||||
supportFile: 'cypress/support/index.js',
|
||||
setupNodeEvents(on, config) {
|
||||
on('before:browser:launch', (browser, launchOptions) => {
|
||||
// `args` is an array of all the arguments that will
|
||||
// be passed to browsers when it launches
|
||||
|
||||
console.log(launchOptions.args); // print all current args
|
||||
|
||||
console.log('***', browser.family, browser.name, '***');
|
||||
|
||||
// Headless/no-GPU runs fall back to software WebGL, and newer Chromium
|
||||
// deprecated that implicit fallback (destabilizes canvas rendering).
|
||||
// Opt back in explicitly. Electron does NOT support launchOptions.args
|
||||
// (it warns and ignores them) — it gets this flag via the
|
||||
// ELECTRON_EXTRA_LAUNCH_ARGS env var (see .circleci/config.yml). So only
|
||||
// push it for real Chromium browsers (e.g. chrome) used locally.
|
||||
if (browser.family === 'chromium' && browser.name !== 'electron') {
|
||||
if (!launchOptions.args.includes('--enable-unsafe-swiftshader')) {
|
||||
launchOptions.args.push('--enable-unsafe-swiftshader');
|
||||
}
|
||||
}
|
||||
|
||||
// whatever you return here becomes the launchOptions
|
||||
return launchOptions;
|
||||
});
|
||||
|
||||
@@ -34,7 +34,6 @@
|
||||
|
||||
// Visual test comparison
|
||||
cy.screenshot('Save Measurements - new measurement added');
|
||||
cy.percyCanvasSnapshot('Save Measurements - new measurement added');
|
||||
});
|
||||
|
||||
// it('retrieves saved measurements', function() {
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import '@percy/cypress';
|
||||
import 'cypress-file-upload';
|
||||
import { DragSimulator } from './DragSimulator.js';
|
||||
import {
|
||||
@@ -20,7 +19,7 @@ import {
|
||||
Cypress.Commands.add('selectLayoutPreset', (presetName, screenshot) => {
|
||||
cy.get('[data-cy="Layout"]').click();
|
||||
if (screenshot) {
|
||||
cy.percyCanvasSnapshot('Layout tool opened');
|
||||
cy.screenshot('Layout tool opened');
|
||||
}
|
||||
cy.get('div').contains(presetName).should('be.visible').click();
|
||||
// fixed wait time for layout changes and rendering
|
||||
@@ -391,24 +390,6 @@ Cypress.Commands.add('isInViewport', element => {
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Percy.io Canvas screenshot workaround
|
||||
*
|
||||
*/
|
||||
Cypress.Commands.add('percyCanvasSnapshot', (name, options = {}) => {
|
||||
cy.document().then(doc => {
|
||||
convertCanvas(doc);
|
||||
});
|
||||
|
||||
// `domTransformation` does not appear to be working
|
||||
// But modifying our immediate DOM does.
|
||||
cy.percySnapshot(name, { ...options }); //, domTransformation: convertCanvas });
|
||||
|
||||
cy.document().then(doc => {
|
||||
unconvertCanvas(doc);
|
||||
});
|
||||
});
|
||||
|
||||
Cypress.Commands.add('setLayout', (columns = 1, rows = 1) => {
|
||||
cy.get('[data-cy="Layout"]').click();
|
||||
|
||||
@@ -418,38 +399,6 @@ Cypress.Commands.add('setLayout', (columns = 1, rows = 1) => {
|
||||
cy.waitDicomImage();
|
||||
});
|
||||
|
||||
function convertCanvas(documentClone) {
|
||||
documentClone.querySelectorAll('canvas').forEach(selector => canvasToImage(selector));
|
||||
|
||||
return documentClone;
|
||||
}
|
||||
|
||||
function unconvertCanvas(documentClone) {
|
||||
// Remove previously generated images
|
||||
documentClone.querySelectorAll('[data-percy-image]').forEach(selector => selector.remove());
|
||||
// Restore canvas visibility
|
||||
documentClone.querySelectorAll('[data-percy-canvas]').forEach(selector => {
|
||||
selector.removeAttribute('data-percy-canvas');
|
||||
selector.style = '';
|
||||
});
|
||||
}
|
||||
|
||||
function canvasToImage(selectorOrEl) {
|
||||
let canvas =
|
||||
typeof selectorOrEl === 'object' ? selectorOrEl : document.querySelector(selectorOrEl);
|
||||
let image = document.createElement('img');
|
||||
let canvasImageBase64 = canvas.toDataURL('image/png');
|
||||
|
||||
// Show Image
|
||||
image.src = canvasImageBase64;
|
||||
image.style = 'width: 100%';
|
||||
image.setAttribute('data-percy-image', true);
|
||||
// Hide Canvas
|
||||
canvas.setAttribute('data-percy-canvas', true);
|
||||
canvas.parentElement.appendChild(image);
|
||||
canvas.style = 'display: none';
|
||||
}
|
||||
|
||||
//Initialize aliases for User Preferences modal
|
||||
Cypress.Commands.add('initPreferencesModalAliases', () => {
|
||||
initPreferencesModalAliases();
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
# Netlify Config
|
||||
#
|
||||
# TOML Reference:
|
||||
# https://www.netlify.com/docs/netlify-toml-reference/
|
||||
#
|
||||
# We use Netlify for deploy previews and for publishing docs (gh-pages branch).
|
||||
# https://viewer.ohif.org is created using a different process that is
|
||||
# managed by CircleCI and deployed to our Google Hosting
|
||||
#
|
||||
|
||||
[build]
|
||||
base = ""
|
||||
build = "yarn run build:viewer:ci"
|
||||
publish = "dist"
|
||||
|
||||
|
||||
# NODE_VERSION in root `.nvmrc` takes priority
|
||||
# YARN_FLAGS: https://www.netlify.com/docs/build-gotchas/#yarn
|
||||
[build.environment]
|
||||
# If 'production', `yarn install` does not install devDependencies
|
||||
NODE_ENV = "development"
|
||||
NODE_VERSION = "20.19.0"
|
||||
YARN_VERSION = "1.22.5"
|
||||
RUBY_VERSION = "2.6.2"
|
||||
YARN_FLAGS = "--no-ignore-optional --pure-lockfile"
|
||||
NETLIFY_USE_YARN = "true"
|
||||
|
||||
[[headers]]
|
||||
# Define which paths this specific [[headers]] block will cover.
|
||||
for = "/*"
|
||||
|
||||
[headers.values]
|
||||
X-Frame-Options = "DENY"
|
||||
X-XSS-Protection = "1; mode=block"
|
||||
|
||||
# Multi-key header rules are expressed with multi-line strings.
|
||||
cache-control = '''
|
||||
max-age=0,
|
||||
no-cache,
|
||||
no-store,
|
||||
must-revalidate'''
|
||||
+44
-65
@@ -8,73 +8,55 @@
|
||||
"repository": "OHIF/Viewers",
|
||||
"main": "dist/index.umd.js",
|
||||
"module": "src/index.js",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14",
|
||||
"npm": ">=6",
|
||||
"yarn": ">=1.16.0"
|
||||
},
|
||||
"proxy": "http://localhost:8042",
|
||||
"scripts": {
|
||||
"build:viewer": "cross-env NODE_ENV=production yarn run build",
|
||||
"build:dev": "cross-env NODE_ENV=development yarn run build",
|
||||
"build:aws": "cross-env NODE_ENV=development APP_CONFIG=config/aws_static.js yarn run build && gzip -9 -r dist",
|
||||
"version:update": "cd ../.. && node ./version.mjs && cd platform/app",
|
||||
"build:viewer:ci": "yarn run version:update && cross-env NODE_ENV=production PUBLIC_URL=/ APP_CONFIG=config/netlify.js QUICK_BUILD=false yarn run build",
|
||||
"build:viewer:qa": "cross-env NODE_ENV=production APP_CONFIG=config/google.js yarn run build",
|
||||
"build:viewer:demo": "cross-env NODE_ENV=production APP_CONFIG=config/demo.js HTML_TEMPLATE=rollbar.html QUICK_BUILD=false yarn run build",
|
||||
"build": "node --max_old_space_size=8096 ./../../node_modules/webpack/bin/webpack.js --progress --config .webpack/webpack.pwa.js",
|
||||
"clean": "shx rm -rf dist",
|
||||
"clean:deep": "yarn run clean && shx rm -rf node_modules",
|
||||
"dev:fast": "rsbuild dev --config ../../rsbuild.config.ts",
|
||||
"dev": "cross-env NODE_ENV=development webpack serve --config .webpack/webpack.pwa.js",
|
||||
"dev:no:cache": "cross-env NODE_ENV=development webpack serve --no-cache --config .webpack/webpack.pwa.js",
|
||||
"dev:orthanc": "cross-env NODE_ENV=development PROXY_TARGET=http://localhost:3000/pacs/dicom-web PROXY_DOMAIN=http://localhost:8042 PROXY_PATH_REWRITE_FROM=/pacs/dicom-web PROXY_PATH_REWRITE_TO=/dicom-web APP_CONFIG=config/docker-nginx-orthanc.js webpack serve --config .webpack/webpack.pwa.js",
|
||||
"dev:orthanc:no:cache": "cross-env NODE_ENV=development PROXY_TARGET=http://localhost:3000/pacs/dicom-web PROXY_DOMAIN=http://localhost:8042 PROXY_PATH_REWRITE_FROM=/pacs/dicom-web PROXY_PATH_REWRITE_TO=/dicom-web APP_CONFIG=config/docker-nginx-orthanc.js webpack serve --no-cache --config .webpack/webpack.pwa.js",
|
||||
"dev:dcm4chee": "cross-env NODE_ENV=development APP_CONFIG=config/local_dcm4chee.js webpack serve --config .webpack/webpack.pwa.js",
|
||||
"dev:static": "cross-env NODE_ENV=development APP_CONFIG=config/local_static.js webpack serve --config .webpack/webpack.pwa.js",
|
||||
"dev:viewer": "yarn run dev",
|
||||
"start": "yarn run dev",
|
||||
"test:e2e": "cypress open",
|
||||
"test:e2e:local": "cypress run --config video=false --browser chrome --spec 'cypress/integration/common/**/*,cypress/integration/pwa/**/*'",
|
||||
"test:e2e:serve": "cross-env APP_CONFIG=config/e2e.js yarn start",
|
||||
"test:unit": "jest --watchAll",
|
||||
"test:unit:ci": "jest --ci --runInBand --collectCoverage",
|
||||
"ci:generateSuccessVersion": "node -p -e \"require('./package.json').version\" > success_version.txt"
|
||||
"node": ">=24"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"README.md"
|
||||
],
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"scripts": {
|
||||
"build:viewer": "cross-env NODE_ENV=production pnpm run build",
|
||||
"build:dev": "cross-env NODE_ENV=development pnpm run build",
|
||||
"build:aws": "cross-env NODE_ENV=development APP_CONFIG=config/aws_static.js pnpm run build && gzip -9 -r dist",
|
||||
"version:update": "cd ../.. && node ./version.mjs && cd platform/app",
|
||||
"build:viewer:ci": "pnpm run version:update && cross-env NODE_ENV=production PUBLIC_URL=/ APP_CONFIG=config/netlify.js QUICK_BUILD=false pnpm run build",
|
||||
"build:viewer:qa": "cross-env NODE_ENV=production APP_CONFIG=config/google.js pnpm run build",
|
||||
"build:viewer:demo": "cross-env NODE_ENV=production APP_CONFIG=config/demo.js HTML_TEMPLATE=rollbar.html QUICK_BUILD=false pnpm run build",
|
||||
"build": "cross-env NODE_OPTIONS=--max-old-space-size=24576 rspack build --config .webpack/webpack.pwa.js",
|
||||
"clean": "shx rm -rf dist",
|
||||
"clean:deep": "pnpm run clean && shx rm -rf node_modules",
|
||||
"dev:fast": "cross-env NODE_OPTIONS=--max-old-space-size=16384 rsbuild dev --config ../../rsbuild.config.ts",
|
||||
"dev": "cross-env NODE_ENV=development rspack serve --config .webpack/webpack.pwa.js",
|
||||
"dev:no:cache": "cross-env NODE_ENV=development rspack serve --config .webpack/webpack.pwa.js",
|
||||
"dev:orthanc": "cross-env NODE_ENV=development PROXY_TARGET=http://localhost:3000/pacs/dicom-web PROXY_DOMAIN=http://localhost:8042 PROXY_PATH_REWRITE_FROM=/pacs/dicom-web PROXY_PATH_REWRITE_TO=/dicom-web APP_CONFIG=config/docker-nginx-orthanc.js rspack serve --config .webpack/webpack.pwa.js",
|
||||
"dev:orthanc:no:cache": "cross-env NODE_ENV=development PROXY_TARGET=http://localhost:3000/pacs/dicom-web PROXY_DOMAIN=http://localhost:8042 PROXY_PATH_REWRITE_FROM=/pacs/dicom-web PROXY_PATH_REWRITE_TO=/dicom-web APP_CONFIG=config/docker-nginx-orthanc.js rspack serve --config .webpack/webpack.pwa.js",
|
||||
"dev:dcm4chee": "cross-env NODE_ENV=development APP_CONFIG=config/local_dcm4chee.js rspack serve --config .webpack/webpack.pwa.js",
|
||||
"dev:static": "cross-env NODE_ENV=development APP_CONFIG=config/local_static.js rspack serve --config .webpack/webpack.pwa.js",
|
||||
"dev:viewer": "pnpm run dev",
|
||||
"start": "pnpm run dev",
|
||||
"test:e2e": "cypress open",
|
||||
"test:e2e:local": "cypress run --config video=false --browser chrome --spec 'cypress/integration/common/**/*,cypress/integration/pwa/**/*'",
|
||||
"test:e2e:serve": "cross-env APP_CONFIG=config/e2e.js pnpm start",
|
||||
"test:unit": "jest --watchAll",
|
||||
"test:unit:ci": "jest --ci --runInBand --collectCoverage",
|
||||
"ci:generateSuccessVersion": "node -p -e \"require('./package.json').version\" > success_version.txt"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "7.29.7",
|
||||
"@cornerstonejs/codec-charls": "1.2.3",
|
||||
"@cornerstonejs/codec-libjpeg-turbo-8bit": "1.2.2",
|
||||
"@cornerstonejs/codec-openjpeg": "1.3.0",
|
||||
"@cornerstonejs/codec-openjph": "2.4.7",
|
||||
"@cornerstonejs/dicom-image-loader": "5.0.0",
|
||||
"@cornerstonejs/dicom-image-loader": "5.0.2",
|
||||
"@emotion/serialize": "1.3.3",
|
||||
"@ohif/core": "3.13.0-beta.89",
|
||||
"@ohif/extension-cornerstone": "3.13.0-beta.89",
|
||||
"@ohif/extension-cornerstone-dicom-rt": "3.13.0-beta.89",
|
||||
"@ohif/extension-cornerstone-dicom-seg": "3.13.0-beta.89",
|
||||
"@ohif/extension-cornerstone-dicom-sr": "3.13.0-beta.89",
|
||||
"@ohif/extension-default": "3.13.0-beta.89",
|
||||
"@ohif/extension-dicom-microscopy": "3.13.0-beta.89",
|
||||
"@ohif/extension-dicom-pdf": "3.13.0-beta.89",
|
||||
"@ohif/extension-dicom-video": "3.13.0-beta.89",
|
||||
"@ohif/extension-test": "3.13.0-beta.89",
|
||||
"@ohif/extension-ultrasound-pleura-bline": "3.13.0-beta.89",
|
||||
"@ohif/i18n": "3.13.0-beta.89",
|
||||
"@ohif/mode-basic-dev-mode": "3.13.0-beta.89",
|
||||
"@ohif/mode-longitudinal": "3.13.0-beta.89",
|
||||
"@ohif/mode-microscopy": "3.13.0-beta.89",
|
||||
"@ohif/mode-test": "3.13.0-beta.89",
|
||||
"@ohif/mode-ultrasound-pleura-bline": "3.13.0-beta.89",
|
||||
"@ohif/ui": "3.13.0-beta.89",
|
||||
"@ohif/ui-next": "3.13.0-beta.89",
|
||||
"@ohif/core": "workspace:*",
|
||||
"@ohif/i18n": "workspace:*",
|
||||
"@ohif/ui": "workspace:*",
|
||||
"@ohif/ui-next": "workspace:*",
|
||||
"@svgr/webpack": "8.1.0",
|
||||
"@types/react": "18.3.23",
|
||||
"classnames": "2.5.1",
|
||||
@@ -83,7 +65,6 @@
|
||||
"dcmjs": "0.49.4",
|
||||
"detect-gpu": "4.0.50",
|
||||
"dicom-parser": "1.8.21",
|
||||
"dotenv-webpack": "1.8.0",
|
||||
"file-loader": "6.2.0",
|
||||
"hammerjs": "2.0.8",
|
||||
"history": "5.3.0",
|
||||
@@ -108,19 +89,17 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/plugin-transform-private-methods": "7.29.7",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "0.5.17",
|
||||
"@rspack/cli": "^2.0.0",
|
||||
"@rspack/core": "^2.0.0",
|
||||
"@rspack/dev-server": "^2.0.0",
|
||||
"@rspack/plugin-react-refresh": "^2.0.0",
|
||||
"@types/node": "20.19.9",
|
||||
"clean-webpack-plugin": "4.0.0",
|
||||
"copy-webpack-plugin": "10.2.4",
|
||||
"cross-env": "7.0.3",
|
||||
"extract-css-chunks-webpack-plugin": "4.10.0",
|
||||
"html-webpack-plugin": "5.6.3",
|
||||
"identity-obj-proxy": "3.0.x",
|
||||
"mini-css-extract-plugin": "2.9.2",
|
||||
"shx": "0.3.4",
|
||||
"tailwindcss": "3.2.4",
|
||||
"terser-webpack-plugin": "5.3.14",
|
||||
"webpack-dev-server": "5.2.2",
|
||||
"workbox-webpack-plugin": "6.6.1"
|
||||
}
|
||||
"tailwindcss": "3.2.4"
|
||||
},
|
||||
"productVersion": "3.4.0",
|
||||
"proxy": "http://localhost:8042"
|
||||
}
|
||||
@@ -8,14 +8,15 @@ module.exports = {
|
||||
// }),
|
||||
presets: [require('../ui/tailwind.config.js'), require('../ui-next/tailwind.config.js')],
|
||||
content: [
|
||||
'./src/**/*.{jsx,js,ts,tsx, css}',
|
||||
'../../extensions/**/*.{jsx,js,ts,tsx, css}',
|
||||
'../ui/src/**/*.{jsx,js,ts,tsx, css}',
|
||||
'../../modes/**/*.{jsx,js,ts,tsx, css}',
|
||||
'./node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx, css}',
|
||||
'./src/**/*.{jsx,js,ts,tsx,css}',
|
||||
'../../extensions/*/src/**/*.{jsx,js,ts,tsx,css}',
|
||||
'../ui/src/**/*.{jsx,js,ts,tsx,css}',
|
||||
'../ui-next/src/**/*.{jsx,js,ts,tsx,css}',
|
||||
'../../modes/*/src/**/*.{jsx,js,ts,tsx,css}',
|
||||
'./node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx,css}',
|
||||
'../../node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx,css}',
|
||||
'../../node_modules/@ohif/ui-next/src/**/*.{js,jsx,ts,tsx,css}',
|
||||
'../../node_modules/@ohif/extension-*/src/**/*.{js,jsx,css, ts,tsx}',
|
||||
'../../node_modules/@ohif/extension-*/src/**/*.{js,jsx,ts,tsx,css}',
|
||||
],
|
||||
theme: {
|
||||
fontFamily: {
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
},
|
||||
"scripts": {
|
||||
"clean": "shx rm -rf dist",
|
||||
"clean:deep": "yarn run clean && shx rm -rf node_modules",
|
||||
"clean:deep": "pnpm run clean && shx rm -rf node_modules",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [
|
||||
@@ -33,8 +33,7 @@
|
||||
"pkg-install": "1.0.0",
|
||||
"registry-url": "6.0.1",
|
||||
"spdx-license-list": "6.10.0",
|
||||
"util": "0.12.5",
|
||||
"yarn-programmatic": "0.1.2"
|
||||
"util": "0.12.5"
|
||||
},
|
||||
"files": [
|
||||
"bin/",
|
||||
|
||||
@@ -62,13 +62,13 @@ const createPackage = async options => {
|
||||
console.log(chalk.green(`run the following command inside the root of the OHIF monorepo`));
|
||||
|
||||
console.log();
|
||||
console.log(chalk.green.bold(` yarn run cli link-${packageType} ${options.targetDir}`));
|
||||
console.log(chalk.green.bold(` pnpm run cli link-${packageType} ${JSON.stringify(options.targetDir)}`));
|
||||
console.log();
|
||||
console.log(
|
||||
chalk.yellow("and when you don't need it anymore, run the following command to unlink it")
|
||||
);
|
||||
console.log();
|
||||
console.log(chalk.yellow(` yarn run cli unlink-${packageType} ${options.name}`));
|
||||
console.log(chalk.yellow(` pnpm run cli unlink-${packageType} ${JSON.stringify(options.name)}`));
|
||||
console.log();
|
||||
|
||||
return true;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { info } from 'yarn-programmatic';
|
||||
import { execa } from 'execa';
|
||||
|
||||
export default async function getYarnInfo(packageName) {
|
||||
return await info(packageName);
|
||||
const { stdout } = await execa('npm', ['info', packageName, '--json']);
|
||||
return JSON.parse(stdout);
|
||||
}
|
||||
@@ -1,10 +1,7 @@
|
||||
import { remove } from 'yarn-programmatic';
|
||||
import { execa } from 'execa';
|
||||
|
||||
const uninstallNPMPackage = async packageName => {
|
||||
// TODO - Anoyingly pkg-install doesn't seem to have uninstall.
|
||||
// So since we are using yarn we will just use yarn here, but the tool
|
||||
// is certainly less generic. But its a super minor issue.
|
||||
await remove(packageName).catch(err => {
|
||||
await execa('pnpm', ['remove', packageName]).catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
@@ -78,7 +78,7 @@ function _createPackage(packageType) {
|
||||
|
||||
// for now ohif-cli is ran through yarn only.
|
||||
// see ohif-cli.md section # OHIF Command Line Interface for reference.
|
||||
const program = new Command('yarn run cli');
|
||||
const program = new Command('pnpm run cli');
|
||||
// Todo: inject with webpack
|
||||
program
|
||||
.version('2.0.7')
|
||||
@@ -156,7 +156,7 @@ program
|
||||
unlinkExtension(extensionName, { viewerDirectory });
|
||||
console.log(
|
||||
chalk.green(
|
||||
`Successfully unlinked Extension ${extensionName} from the Viewer, don't forget to run yarn install --frozen-lockfile --force`
|
||||
`Successfully unlinked Extension ${extensionName} from the Viewer, don't forget to run pnpm install`
|
||||
)
|
||||
);
|
||||
});
|
||||
@@ -179,7 +179,7 @@ program
|
||||
unlinkMode(modeName, { viewerDirectory });
|
||||
console.log(
|
||||
chalk.green(
|
||||
`Successfully unlinked Mode ${modeName} from the Viewer, don't forget to run yarn install --frozen-lockfile --force`
|
||||
`Successfully unlinked Mode ${modeName} from the Viewer, don't forget to run pnpm install`
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
@@ -12,13 +12,15 @@ const config = {
|
||||
entry: rootDir + '/' + pkg.module,
|
||||
devtool: 'source-map',
|
||||
output: {
|
||||
library: {
|
||||
type: 'umd',
|
||||
umdNamedDefine: true,
|
||||
},
|
||||
path: outputFolder,
|
||||
filename: outputFile,
|
||||
library: pkg.name,
|
||||
libraryTarget: 'umd',
|
||||
chunkFilename: '[name].chunk.js',
|
||||
umdNamedDefine: true,
|
||||
globalObject: "typeof self !== 'undefined' ? self : this",
|
||||
chunkFilename: '[name].chunk.js',
|
||||
globalObject: "typeof self !== 'undefined' ? self : this",
|
||||
},
|
||||
externals: [
|
||||
{
|
||||
|
||||
@@ -3,16 +3,15 @@
|
||||
"keywords": ["ohif-extension"],
|
||||
"module": "src/index.tsx",
|
||||
"engines": {
|
||||
"node": ">=14",
|
||||
"npm": ">=6",
|
||||
"yarn": ">=1.18.0"
|
||||
"node": ">=24",
|
||||
"pnpm": ">=11"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
|
||||
"dev:my-extension": "yarn run dev",
|
||||
"dev:my-extension": "pnpm run dev",
|
||||
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
|
||||
"build:package": "yarn run build",
|
||||
"start": "yarn run dev"
|
||||
"build:package": "pnpm run build",
|
||||
"start": "pnpm run dev"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@ohif/core": "^{LATEST_OHIF_VERSION}",
|
||||
|
||||
@@ -11,13 +11,15 @@ const config = {
|
||||
entry: rootDir + '/' + pkg.module,
|
||||
devtool: 'source-map',
|
||||
output: {
|
||||
library: {
|
||||
type: 'umd',
|
||||
umdNamedDefine: true,
|
||||
},
|
||||
path: outputFolder,
|
||||
filename: outputFile,
|
||||
library: pkg.name,
|
||||
libraryTarget: 'umd',
|
||||
chunkFilename: '[name].chunk.js',
|
||||
umdNamedDefine: true,
|
||||
globalObject: "typeof self !== 'undefined' ? self : this",
|
||||
chunkFilename: '[name].chunk.js',
|
||||
globalObject: "typeof self !== 'undefined' ? self : this",
|
||||
},
|
||||
externals: [
|
||||
{
|
||||
|
||||
@@ -3,16 +3,15 @@
|
||||
"keywords": ["ohif-mode"],
|
||||
"module": "src/index.tsx",
|
||||
"engines": {
|
||||
"node": ">=14",
|
||||
"npm": ">=6",
|
||||
"yarn": ">=1.16.0"
|
||||
"node": ">=24",
|
||||
"pnpm": ">=11"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
|
||||
"dev:cornerstone": "yarn run dev",
|
||||
"dev:cornerstone": "pnpm run dev",
|
||||
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
|
||||
"build:package": "yarn run build",
|
||||
"start": "yarn run dev",
|
||||
"build:package": "pnpm run build",
|
||||
"start": "pnpm run dev",
|
||||
"test:unit": "jest --watchAll",
|
||||
"test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
|
||||
},
|
||||
|
||||
@@ -31,9 +31,11 @@ module.exports = (env, argv) => {
|
||||
sideEffects: false,
|
||||
},
|
||||
output: {
|
||||
library: {
|
||||
name: 'ohif-core',
|
||||
type: 'umd',
|
||||
},
|
||||
path: ROOT_DIR,
|
||||
library: 'ohif-core',
|
||||
libraryTarget: 'umd',
|
||||
filename: pkg.main,
|
||||
},
|
||||
externals: [/\b(vtk.js)/, /\b(dcmjs)/, /\b(gl-matrix)/, /^@cornerstonejs/],
|
||||
|
||||
+14
-16
@@ -8,27 +8,25 @@
|
||||
"main": "dist/ohif-core.umd.js",
|
||||
"module": "src/index.ts",
|
||||
"types": "src/types/index.ts",
|
||||
"sideEffects": "false",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
"engines": {
|
||||
"node": ">=24"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"README.md"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=14",
|
||||
"npm": ">=6",
|
||||
"yarn": ">=1.16.0"
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"sideEffects": "false",
|
||||
"scripts": {
|
||||
"clean": "shx rm -rf dist",
|
||||
"clean:deep": "yarn run clean && shx rm -rf node_modules",
|
||||
"clean:deep": "pnpm run clean && shx rm -rf node_modules",
|
||||
"dev": "jest --watchAll",
|
||||
"dev:core": "yarn run dev",
|
||||
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
|
||||
"build:package": "yarn run build",
|
||||
"start": "yarn run dev",
|
||||
"dev:core": "pnpm run dev",
|
||||
"build": "cross-env NODE_ENV=production rspack build --config .webpack/webpack.prod.js",
|
||||
"build:package": "pnpm run build",
|
||||
"start": "pnpm run dev",
|
||||
"test:unit": "jest --watchAll",
|
||||
"test:unit:ci": "jest --ci --runInBand --collectCoverage"
|
||||
},
|
||||
@@ -37,10 +35,10 @@
|
||||
"@cornerstonejs/codec-libjpeg-turbo-8bit": "1.2.2",
|
||||
"@cornerstonejs/codec-openjpeg": "1.3.0",
|
||||
"@cornerstonejs/codec-openjph": "2.4.7",
|
||||
"@cornerstonejs/core": "5.0.0",
|
||||
"@cornerstonejs/dicom-image-loader": "5.0.0",
|
||||
"@cornerstonejs/metadata": "5.0.0",
|
||||
"@ohif/ui": "3.13.0-beta.89",
|
||||
"@cornerstonejs/core": "5.0.2",
|
||||
"@cornerstonejs/dicom-image-loader": "5.0.2",
|
||||
"@cornerstonejs/metadata": "5.0.2",
|
||||
"@ohif/ui": "workspace:*",
|
||||
"cornerstone-math": "0.1.10",
|
||||
"dicom-parser": "1.8.21"
|
||||
},
|
||||
|
||||
Binary file not shown.
@@ -0,0 +1,403 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
sidebar_label: Build Tooling (Rspack)
|
||||
title: Webpack to Rspack v2
|
||||
summary: 3.13 swaps Webpack for Rspack v2 across the monorepo. This guide covers the new build commands, plugin replacements, and how to update custom extensions that ship their own webpack config.
|
||||
---
|
||||
|
||||
# Webpack to Rspack v2
|
||||
|
||||
OHIF 3.13 replaces Webpack with [Rspack](https://rspack.dev) v2 as the
|
||||
default bundler for the app, every extension, every mode, and the
|
||||
`@ohif/ui-next` / `@ohif/ui` / `@ohif/i18n` / `@ohif/core` packages.
|
||||
|
||||
:::caution The `.webpack/` files are now Rspack configs
|
||||
The directory layout and filenames are unchanged — you will still find
|
||||
`.webpack/webpack.base.js`, `.webpack/webpack.pwa.js`, and a
|
||||
`.webpack/webpack.prod.js` in each package. **Despite the `webpack` name,
|
||||
these files now configure Rspack.** They `require('@rspack/core')` (aliased
|
||||
to a local `webpack` variable so the rest of the config reads the same) and
|
||||
are run by the `rspack` CLI. The names were kept to minimize churn and keep
|
||||
custom-extension forks merging cleanly — do not assume a file called
|
||||
`webpack.*.js` runs Webpack.
|
||||
:::
|
||||
|
||||
There is no Webpack fallback. Webpack and all of its plugins have been
|
||||
removed from the dependency tree; the only supported bundler is Rspack
|
||||
(plus Rsbuild for the `dev:fast` path, see below).
|
||||
|
||||
## Why Rspack
|
||||
|
||||
Rspack is API-compatible with most of the Webpack v5 plugin ecosystem
|
||||
but written in Rust. For the OHIF tree the practical wins are:
|
||||
|
||||
- 3-5x faster cold builds and `--watch` rebuilds.
|
||||
- Built-in SWC minification (no separate `terser-webpack-plugin`).
|
||||
- First-party drop-in replacements for the plugins that previously
|
||||
ate the bulk of build time (`MiniCssExtractPlugin`, `CopyWebpackPlugin`,
|
||||
`HtmlWebpackPlugin`).
|
||||
|
||||
## New scripts
|
||||
|
||||
`platform/app/package.json` was rewritten to invoke `rspack` instead of
|
||||
`webpack`:
|
||||
|
||||
```diff
|
||||
- "build": "node --max_old_space_size=8096 ./../../node_modules/webpack/bin/webpack.js --progress --config .webpack/webpack.pwa.js",
|
||||
+ "build": "cross-env NODE_OPTIONS=--max-old-space-size=24576 rspack build --config .webpack/webpack.pwa.js",
|
||||
- "dev": "cross-env NODE_ENV=development webpack serve --config .webpack/webpack.pwa.js",
|
||||
+ "dev": "cross-env NODE_ENV=development rspack serve --config .webpack/webpack.pwa.js",
|
||||
- "dev:orthanc": "… webpack serve --config .webpack/webpack.pwa.js",
|
||||
+ "dev:orthanc": "… rspack serve --config .webpack/webpack.pwa.js"
|
||||
```
|
||||
|
||||
Notes:
|
||||
|
||||
- The build now requests `--max-old-space-size=24576` (24 GB) via
|
||||
`NODE_OPTIONS`. The previous 8 GB limit is no longer enough for full
|
||||
prod builds.
|
||||
- `webpack serve` is replaced by `rspack serve`. All `dev:*` variants
|
||||
(`dev:orthanc`, `dev:dcm4chee`, `dev:static`, …) were updated the same way.
|
||||
- `dev:no:cache` no longer passes `--no-cache` (Rspack's CLI does not
|
||||
expose it). It is now identical to `dev`; production caching is disabled
|
||||
unconditionally in the config instead (see "Caching" below).
|
||||
- `dev:fast` runs **Rsbuild** rather than Rspack directly
|
||||
(`rsbuild dev --config ../../rsbuild.config.ts`). Rsbuild is the
|
||||
higher-level toolchain built on Rspack; it is used only for the fast
|
||||
dev-server path and is configured separately in `rsbuild.config.ts`.
|
||||
|
||||
## Dependency changes
|
||||
|
||||
`platform/app/package.json` (and every other workspace package that ships a
|
||||
`.webpack/webpack.prod.js`) **adds**:
|
||||
|
||||
```json
|
||||
{
|
||||
"devDependencies": {
|
||||
"@rspack/cli": "^2.0.0",
|
||||
"@rspack/core": "^2.0.0",
|
||||
"@rspack/dev-server": "^2.0.0",
|
||||
"@rspack/plugin-react-refresh": "^2.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
and **removes** the Webpack toolchain that is no longer used:
|
||||
|
||||
```diff
|
||||
- "webpack": "5.105.0",
|
||||
- "@pmmmwh/react-refresh-webpack-plugin": "0.5.17",
|
||||
- "clean-webpack-plugin": "4.0.0",
|
||||
- "copy-webpack-plugin": "10.2.4",
|
||||
- "html-webpack-plugin": "5.6.3",
|
||||
- "terser-webpack-plugin": "5.3.14",
|
||||
- "webpack-dev-server": "5.2.2",
|
||||
- "workbox-webpack-plugin": "6.6.1",
|
||||
- "dotenv-webpack": "1.8.0",
|
||||
- "extract-css-chunks-webpack-plugin": "4.10.0",
|
||||
```
|
||||
|
||||
(`webpack-merge` is kept — Rspack configs still use it to merge the base
|
||||
and per-package configs.)
|
||||
|
||||
The root `rsbuild.config.ts` path additionally depends on `@rsbuild/core`,
|
||||
`@rsbuild/plugin-react`, and `@rsbuild/plugin-node-polyfill`.
|
||||
|
||||
## Shared base config (`.webpack/webpack.base.js`)
|
||||
|
||||
`webpack.base.js` is the file most consumers extend in their own
|
||||
extensions. It now requires `@rspack/core` instead of `webpack`:
|
||||
|
||||
```diff
|
||||
- const webpack = require('webpack');
|
||||
+ const webpack = require('@rspack/core');
|
||||
```
|
||||
|
||||
Rspack exports the same `DefinePlugin`, `ProvidePlugin`, and
|
||||
`IgnorePlugin` constructors under the same names, so most plugin code
|
||||
is unchanged — which is why the local variable is still called `webpack`.
|
||||
|
||||
### Plugin replacements
|
||||
|
||||
| 3.12 (Webpack) | 3.13 (Rspack) |
|
||||
|-----------------------------------------|---------------------------------------------------------------|
|
||||
| `mini-css-extract-plugin` | `require('@rspack/core').CssExtractRspackPlugin` |
|
||||
| `clean-webpack-plugin` | `output: { clean: true }` |
|
||||
| `copy-webpack-plugin` | `require('@rspack/core').CopyRspackPlugin` |
|
||||
| `html-webpack-plugin` | `require('@rspack/core').HtmlRspackPlugin` |
|
||||
| `@pmmmwh/react-refresh-webpack-plugin` | `require('@rspack/plugin-react-refresh')` |
|
||||
| `terser-webpack-plugin` | Built-in `SwcJsMinimizerRspackPlugin` (no config needed) |
|
||||
| `workbox-webpack-plugin` (`InjectManifest`) | Custom `InjectServiceWorkerManifestPlugin` in `webpack.pwa.js` |
|
||||
| `dotenv-webpack` | Plain `require('dotenv').config()` |
|
||||
|
||||
`InjectServiceWorkerManifestPlugin` is a small inline plugin that
|
||||
re-implements what `workbox-webpack-plugin`'s `InjectManifest` did, but
|
||||
on top of Rspack's compilation hooks (`thisCompilation` →
|
||||
`processAssets`, emitting a `RawSource`). It is defined locally in
|
||||
`platform/app/.webpack/webpack.pwa.js` — copy it into your own
|
||||
`webpack.pwa.js` derivative if you forked that file.
|
||||
|
||||
The React Refresh plugin is loaded defensively (`try/require`) and is
|
||||
skipped when it is unavailable, in production, or during e2e coverage
|
||||
runs (`COVERAGE=true`), since the refresh runtime's overlay iframe
|
||||
interferes with Playwright/Cypress pointer events.
|
||||
|
||||
### Library output
|
||||
|
||||
Every package-level `webpack.prod.js` switched from the legacy library
|
||||
flags to the structured `output.library` form:
|
||||
|
||||
```diff
|
||||
output: {
|
||||
- library: 'ohif-extension-cornerstone',
|
||||
- libraryTarget: 'umd',
|
||||
+ library: {
|
||||
+ name: 'ohif-extension-cornerstone',
|
||||
+ type: 'umd',
|
||||
+ },
|
||||
path: ROOT_DIR,
|
||||
filename: pkg.main
|
||||
}
|
||||
```
|
||||
|
||||
If your extension uses the old flat `library` / `libraryTarget` keys,
|
||||
move to the nested form — Rspack is stricter about validating this shape.
|
||||
|
||||
### Minifier
|
||||
|
||||
Terser is gone. Production builds use Rspack's built-in SWC minifier
|
||||
unconditionally:
|
||||
|
||||
```diff
|
||||
if (isProdBuild) {
|
||||
- config.optimization.minimizer = [
|
||||
- new TerserJSPlugin({ parallel: true, terserOptions: {} }),
|
||||
- ];
|
||||
+ config.optimization.minimizer = [new webpack.SwcJsMinimizerRspackPlugin()];
|
||||
}
|
||||
```
|
||||
|
||||
No options are needed for the common case. If you previously tuned
|
||||
`terserOptions`, port the equivalent settings to the SWC minimizer's
|
||||
options object.
|
||||
|
||||
### Source maps
|
||||
|
||||
The devtool setting is **unchanged** from 3.12 — production builds still
|
||||
emit full `source-map`, development uses `cheap-module-source-map`, and a
|
||||
`QUICK_BUILD=true` build disables source maps and minification entirely
|
||||
(`config.devtool = false`):
|
||||
|
||||
```js
|
||||
devtool: isProdBuild ? 'source-map' : 'cheap-module-source-map',
|
||||
// …
|
||||
if (isQuickBuild) {
|
||||
config.optimization.minimize = false;
|
||||
config.devtool = false;
|
||||
}
|
||||
```
|
||||
|
||||
### Caching
|
||||
|
||||
```diff
|
||||
- cache: {
|
||||
- type: 'filesystem',
|
||||
- },
|
||||
+ cache: isProdBuild ? false : { type: 'filesystem' },
|
||||
```
|
||||
|
||||
Production builds always run from a clean cache. The development
|
||||
filesystem cache is unchanged, but the cache directory is no longer
|
||||
shared with Webpack — clear `.cache/` after upgrading if you see stale
|
||||
output.
|
||||
|
||||
### `IgnorePlugin` for native modules
|
||||
|
||||
A new `IgnorePlugin` entry was added to skip Node-only modules pulled
|
||||
in by the Cornerstone codecs:
|
||||
|
||||
```js
|
||||
new webpack.IgnorePlugin({
|
||||
resourceRegExp: /^(fs|path)$/,
|
||||
contextRegExp: /@cornerstonejs[\\/]codec-/,
|
||||
}),
|
||||
```
|
||||
|
||||
If you removed this when forking `webpack.base.js`, add it back —
|
||||
without it the prod bundle will try to require `fs` at runtime.
|
||||
|
||||
### Node globals (`__filename` / `__dirname`)
|
||||
|
||||
A new top-level `node` block tells the bundler to **leave `__filename` and
|
||||
`__dirname` references un-substituted** rather than mocking them:
|
||||
|
||||
```js
|
||||
node: {
|
||||
__filename: false,
|
||||
__dirname: false,
|
||||
},
|
||||
```
|
||||
|
||||
The Emscripten-compiled Cornerstone codecs reference `__dirname` inside
|
||||
`if (ENVIRONMENT_IS_NODE)` branches that never run in the browser. Rspack's
|
||||
default (a `'mock'` value) emits a warning for each such reference; setting
|
||||
the values to `false` leaves them alone, which is harmless at runtime and
|
||||
silences the warnings. The same `node` block is mirrored in
|
||||
`rsbuild.config.ts` for the `dev:fast` path (Rsbuild's default is
|
||||
`warn-mock`, with the same noisy behavior).
|
||||
|
||||
### Workspace package transpile
|
||||
|
||||
`.webpack/rules/transpileJavaScript.js` no longer treats `@ohif/*`
|
||||
packages as opaque `node_modules`:
|
||||
|
||||
```diff
|
||||
mode === 'production'
|
||||
? excludeNodeModulesExcept([
|
||||
+ // Workspace packages (needed for pnpm shamefully-hoist where they
|
||||
+ // resolve through node_modules)
|
||||
+ '@ohif',
|
||||
'react-dnd',
|
||||
'dnd-core',
|
||||
```
|
||||
|
||||
pnpm symlinks workspace packages through `node_modules`, so the
|
||||
transpile rule has to opt them back in or the production bundle would
|
||||
ship un-transpiled TypeScript. Custom monorepos that vendor extensions
|
||||
under a different scope should add their own scope here.
|
||||
|
||||
### Module resolution for pnpm
|
||||
|
||||
Two resolution changes were needed for pnpm's isolated (non-hoisted)
|
||||
`node_modules` layout. Both live in `resolve` in `webpack.base.js` (and
|
||||
`webpack.pwa.js`):
|
||||
|
||||
- `resolve.modules` now **leads with a bare `'node_modules'`** before the
|
||||
absolute paths. This preserves the default importer-relative walk-up so
|
||||
transitive deps (e.g. `react-remove-scroll` → `tslib`) resolve to the
|
||||
sibling copy inside `.pnpm/<pkg>/node_modules` rather than an older
|
||||
hoisted one.
|
||||
|
||||
```diff
|
||||
modules: [
|
||||
+ 'node_modules',
|
||||
path.resolve(__dirname, '../node_modules'),
|
||||
path.resolve(__dirname, '../../../node_modules'),
|
||||
// …
|
||||
],
|
||||
```
|
||||
|
||||
- A new `'@ohif/app$'` alias maps the bare specifier to the app source.
|
||||
A couple of extensions import app-level utilities from `@ohif/app`;
|
||||
pnpm's isolated layout does not expose the top-level app package to
|
||||
them, and adding it as a workspace dependency would create an
|
||||
`app ↔ default` cycle, so the alias resolves it directly (the `$`
|
||||
makes it an exact match, so deep subpath imports still resolve normally):
|
||||
|
||||
```js
|
||||
'@ohif/app$': path.resolve(__dirname, '../platform/app/src/index.js'),
|
||||
```
|
||||
|
||||
### Plugin resolution from source (`writePluginImportsFile.js`)
|
||||
|
||||
Under yarn the app depended on every extension/mode and copied their
|
||||
`public/` and `dist/` assets out of `node_modules`. Under pnpm + Rspack,
|
||||
extensions and modes are **not** dependencies of `platform/app`; instead
|
||||
`writePluginImportsFile.js` resolves the source directory of each plugin
|
||||
**declared in `pluginConfig.json`**. It scans the `extensions/` and `modes/`
|
||||
workspaces only to map the *declared* package names to their directories —
|
||||
packages present in those workspaces but not listed in `pluginConfig.json`
|
||||
are ignored. The resulting map is exposed two ways:
|
||||
|
||||
- `getPluginResolveAliases()` returns a `resolve.alias` map (one exact-match
|
||||
`"<pkg>$"` entry per plugin in `pluginConfig.json`) that `webpack.pwa.js`
|
||||
merges into `resolve.alias`, so the generated `pluginImports.js`
|
||||
`import()`s link to the plugin source without the plugin being a
|
||||
dependency.
|
||||
- `createCopyPluginToDist(...)` copies each plugin's `public/` and `dist/`
|
||||
assets from that same source directory (falling back to `node_modules`
|
||||
for third-party entries such as `dicom-microscopy-viewer`).
|
||||
|
||||
A plugin can be included three ways, all declared as an entry in
|
||||
`pluginConfig.json`:
|
||||
|
||||
1. **In-tree workspace** — a package under `extensions/` or `modes/`. Declare
|
||||
it by `packageName`; its source directory is found by the workspace scan.
|
||||
2. **External, out-of-tree source** — a checkout that lives outside this repo
|
||||
(e.g. an extension generated by the OHIF CLI). Add a `directory` field to
|
||||
the entry. The path may be absolute, `~`-relative to the home directory, or
|
||||
`.`-relative to the repo root; `workspacePluginDir()` uses it directly and
|
||||
skips the workspace scan.
|
||||
3. **Installed dependency** — add the package to the **root `package.json`** as
|
||||
a normal dependency and declare it by `packageName` (no `directory`). It then
|
||||
resolves from `node_modules` like any other installed package: the bare
|
||||
specifier flows through webpack's normal module walk-up (no alias is
|
||||
generated), and `pluginAssetDir()` copies its `public/`/`dist/` assets from
|
||||
`node_modules`. This is the path used for third-party packages such as
|
||||
`dicom-microscopy-viewer`.
|
||||
|
||||
If you maintain a fork that injects extensions a different way, this is the
|
||||
seam to update.
|
||||
|
||||
## Per-package webpack.prod.js
|
||||
|
||||
For every workspace package that previously had a `webpack.prod.js`,
|
||||
update the top of the file:
|
||||
|
||||
```diff
|
||||
- const webpack = require('webpack');
|
||||
+ const webpack = require('@rspack/core');
|
||||
const { merge } = require('webpack-merge');
|
||||
- const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
+ const MiniCssExtractPlugin = webpack.CssExtractRspackPlugin;
|
||||
```
|
||||
|
||||
and replace the flat library options with the nested form shown above.
|
||||
The rest of the file (`merge(...)`, `entry`, `externals`, `output.path`,
|
||||
`output.filename`) is unchanged.
|
||||
|
||||
## Custom extensions
|
||||
|
||||
If you maintain an out-of-tree OHIF extension that uses the OHIF
|
||||
template, do the following:
|
||||
|
||||
1. Add `@rspack/cli`, `@rspack/core`, `@rspack/dev-server`, and
|
||||
`@rspack/plugin-react-refresh` to `devDependencies` (`^2.0.0`), and
|
||||
remove `webpack`, `webpack-dev-server`, and the webpack-specific plugins
|
||||
(`mini-css-extract-plugin`, `copy-webpack-plugin`, `html-webpack-plugin`,
|
||||
`clean-webpack-plugin`, `terser-webpack-plugin`,
|
||||
`@pmmmwh/react-refresh-webpack-plugin`, `workbox-webpack-plugin`,
|
||||
`dotenv-webpack`).
|
||||
2. Replace `require('webpack')` with `require('@rspack/core')` in your
|
||||
`.webpack/*.js` files (you can keep the local variable named `webpack`).
|
||||
3. Update plugin imports as shown in the table above, and switch the flat
|
||||
`library`/`libraryTarget` keys to the nested `output.library` form.
|
||||
4. Change your build script from `webpack` to `rspack build` (and
|
||||
`webpack serve` to `rspack serve`).
|
||||
5. If you re-export the OHIF base config, re-pull it after upgrading —
|
||||
the `IgnorePlugin`, `node` block, `transpileJavaScript`, and pnpm
|
||||
resolution changes only land when you re-merge.
|
||||
|
||||
## Known migration notes
|
||||
|
||||
- **`@million/lint`** integration is removed from `webpack.pwa.js`
|
||||
(it was already commented out in 3.12).
|
||||
- **`Dotenv` plugin** is replaced by a top-level `dotenv.config()`
|
||||
call. If you relied on the plugin's `safe: true` behavior, move
|
||||
that check into your config loader.
|
||||
- **Dev server proxy** moved from the object-keyed shape to the
|
||||
array-of-`{ context, target }` shape that `@rspack/dev-server`
|
||||
expects:
|
||||
|
||||
```diff
|
||||
- proxy: [{ '/dicomweb': 'http://localhost:5000' }],
|
||||
+ proxy: [{ context: ['/dicomweb'], target: 'http://localhost:5000' }],
|
||||
```
|
||||
|
||||
- **Dev-server overlay** is disabled when `COVERAGE=true` (the overlay
|
||||
iframe intercepts pointer events and breaks Playwright/Cypress clicks);
|
||||
it is kept on for normal local dev.
|
||||
- The `dev:no:cache` script is now identical to `dev` — keep it as an
|
||||
alias if external scripts call it, or delete it.
|
||||
</content>
|
||||
</invoke>
|
||||
@@ -12,4 +12,17 @@ import { useCurrentSidebarCategory } from '@docusaurus/theme-common';
|
||||
|
||||
This guide covers changes when upgrading from OHIF version 3.12 to version 3.13.
|
||||
|
||||
The largest changes in 3.13 are infrastructure-level:
|
||||
|
||||
- **[Package Manager](./package-manager.md)** — the monorepo moves from
|
||||
yarn + lerna to **pnpm workspaces**, with new install/run commands
|
||||
and a `workspace:*` syntax for cross-package dependencies.
|
||||
- **[Build Tooling](./build-tooling.md)** — Webpack is replaced with
|
||||
**Rspack v2** across the app and every extension/mode, with new
|
||||
plugin imports and faster build commands.
|
||||
- **[Node Version](./node-version.md)** — the minimum Node.js runtime
|
||||
is now **24**.
|
||||
- **[SegmentationService](./segmentation-service.md)** — the
|
||||
`removeSegmentationRepresentations` method was renamed.
|
||||
|
||||
<DocCardList items={useCurrentSidebarCategory().items.filter(item => item.docId !== 'migration-guide/3p12-to-3p13/index')} />
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
sidebar_position: 5
|
||||
sidebar_label: Node Version
|
||||
title: Node.js 24 Requirement
|
||||
summary: 3.13 raises the minimum Node.js version from 18 to 24. This guide covers the affected engines fields, CI runners, and how the bump interacts with the pnpm and Rspack upgrades.
|
||||
---
|
||||
|
||||
# Node.js 24
|
||||
|
||||
OHIF 3.13 bumps the minimum supported Node.js runtime from 18 to **24**.
|
||||
The `.node-version` file at the repository root and every workspace
|
||||
package's `engines.node` field have been updated.
|
||||
|
||||
```diff
|
||||
- .node-version 20.9.0
|
||||
+ .node-version 24
|
||||
```
|
||||
|
||||
```diff
|
||||
"engines": {
|
||||
- "node": ">=18",
|
||||
- "npm": ">=6",
|
||||
- "yarn": ">=1.20.0"
|
||||
+ "node": ">=24",
|
||||
+ "pnpm": "11.1.1"
|
||||
}
|
||||
```
|
||||
|
||||
The `npm` and `yarn` engines fields are removed because the repository
|
||||
no longer supports either as the install path — see the
|
||||
[Package Manager guide](./package-manager.md).
|
||||
|
||||
## Why Node 24
|
||||
|
||||
- Rspack v2 requires a modern V8 build (Node 24 ships V8 12.x), which
|
||||
is needed for the SWC-based minifier to work without falling back to
|
||||
Babel transforms.
|
||||
- pnpm 11's `shamefullyHoist` + workspace symlink layout depends on
|
||||
Node 20.10+ `fs.symlink` semantics; Node 24 is the current LTS line
|
||||
and is what CI is pinned to.
|
||||
- The Cornerstone3D codecs use top-level `await` and the modern
|
||||
`Uint8Array`/`Buffer` interop introduced in Node 22+.
|
||||
- The 24 GB `--max-old-space-size` setting in the prod build script
|
||||
benefits from Node 24's improved large-heap GC.
|
||||
|
||||
## Affected files
|
||||
|
||||
Updated in this release:
|
||||
|
||||
- `.node-version` — pinned to `24`.
|
||||
- `package.json` (root) — `engines.node >=24`, `engines.pnpm 11.1.1`.
|
||||
- Every workspace package's `engines.node` field, including
|
||||
`platform/app`, `platform/core`, `platform/ui`, `platform/ui-next`,
|
||||
`platform/i18n`, `platform/cli`, every `extensions/*` package, and
|
||||
every `modes/*` package.
|
||||
- `platform/cli/templates/extension/dependencies.json` and
|
||||
`platform/cli/templates/mode/dependencies.json` — extensions and
|
||||
modes generated from the CLI now require Node 24 and pnpm 11.1.1.
|
||||
- CI config (`.github/workflows/*`, `.circleci/config.yml`,
|
||||
`.netlify/build-deploy-preview.sh`) was bumped in lockstep.
|
||||
|
||||
## Local environments
|
||||
|
||||
If you use a Node version manager:
|
||||
|
||||
```bash
|
||||
# nvm
|
||||
nvm install 24
|
||||
nvm use 24
|
||||
|
||||
# fnm
|
||||
fnm install 24
|
||||
fnm use 24
|
||||
|
||||
# volta
|
||||
volta install node@24
|
||||
```
|
||||
|
||||
`.node-version` is honored by `fnm`, `nodenv`, `asdf`, and (with the
|
||||
`engines-strict` setting) `pnpm`. Most editors with a Node toolbar
|
||||
will switch automatically when you cd into the repo.
|
||||
|
||||
## CI runners
|
||||
|
||||
Update your pipeline images:
|
||||
|
||||
```diff
|
||||
- node-version: '20.9.0'
|
||||
+ node-version: '24'
|
||||
```
|
||||
|
||||
GitHub Actions: `actions/setup-node@v4` with `node-version: '24'`.
|
||||
CircleCI: `cimg/node:24.0` (or newer).
|
||||
Docker base image: `node:24-alpine` for production builds. The
|
||||
project's `Dockerfile` was updated to match.
|
||||
|
||||
## Behavior changes worth knowing
|
||||
|
||||
- **`punycode`**: Node 24 prints a deprecation warning when the
|
||||
built-in `punycode` is required. Some transitive dependencies still
|
||||
do this; the warning is harmless but noisy. Set
|
||||
`NODE_OPTIONS=--no-deprecation` if you need to silence it in CI.
|
||||
- **OpenSSL provider**: Node 24 uses OpenSSL 3.x. If you previously
|
||||
set `NODE_OPTIONS=--openssl-legacy-provider` for old Webpack hashes,
|
||||
remove it — Rspack does not need it.
|
||||
- **`fetch` is global**: Node 24 has the WHATWG `fetch` built in.
|
||||
Polyfills like `node-fetch` are no longer needed in scripts that
|
||||
run under Node.
|
||||
- **ESM resolution is stricter**: relative imports in `.js` files
|
||||
inside `"type": "module"` packages must include the file extension.
|
||||
This mainly affects test helpers under `tests/utils/`.
|
||||
|
||||
## Compatibility window
|
||||
|
||||
If you cannot move to Node 24 yet, the `build:webpack` fallback in
|
||||
`platform/app/package.json` runs under Node 22, but production
|
||||
support is not guaranteed and the Rspack scripts will refuse to run.
|
||||
We recommend planning the runtime upgrade alongside the 3.13
|
||||
deployment.
|
||||
@@ -0,0 +1,190 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
sidebar_label: Package Manager (pnpm)
|
||||
title: Yarn / Lerna to pnpm
|
||||
summary: 3.13 moves the monorepo from yarn + lerna to pnpm workspaces. This guide covers the new install/run commands, workspace dependency syntax, and changes to CLI-generated extensions and modes.
|
||||
---
|
||||
|
||||
# Yarn + Lerna to pnpm
|
||||
|
||||
OHIF 3.13 replaces the `yarn` + `lerna` toolchain with **pnpm workspaces**.
|
||||
The repository now uses a single `pnpm-lock.yaml` and a `pnpm-workspace.yaml`
|
||||
manifest at the root. `yarn.lock`, `lerna.json`, `nx.json`, `bun.lock`,
|
||||
the `addOns/` directory, and `preinstall.js` have all been removed.
|
||||
|
||||
## Required tools
|
||||
|
||||
| Tool | Old minimum | New minimum |
|
||||
|------|---------------|-------------|
|
||||
| node | `>=18` | `>=24` |
|
||||
| pnpm | _(unused)_ | `>=11` |
|
||||
| yarn | `>=1.20.0` | _(removed)_ |
|
||||
| npm | `>=6` | _(removed)_ |
|
||||
|
||||
The root `package.json` declares `"packageManager": "pnpm@11.1.1"`. If you use
|
||||
[Corepack](https://nodejs.org/api/corepack.html), running any pnpm command in
|
||||
the repo will pick the correct version automatically:
|
||||
|
||||
```bash
|
||||
corepack enable
|
||||
corepack prepare pnpm@11.1.1 --activate
|
||||
```
|
||||
|
||||
## Install and run commands
|
||||
|
||||
Replace your existing yarn and lerna commands with their pnpm equivalents.
|
||||
|
||||
| 3.12 (yarn / lerna) | 3.13 (pnpm) |
|
||||
|-------------------------------------------|---------------------------------------------|
|
||||
| `yarn install --frozen-lockfile` | `pnpm install --frozen-lockfile` |
|
||||
| `yarn install` | `pnpm install` |
|
||||
| `yarn run dev` | `pnpm run dev` |
|
||||
| `yarn run build` | `pnpm run build` |
|
||||
| `yarn run test:unit` | `pnpm run test:unit` |
|
||||
| `lerna run build --stream` | `pnpm -r run build` |
|
||||
| `lerna run dev:viewer --stream` | `pnpm --filter @ohif/app run dev:viewer` |
|
||||
| `lerna run clean --stream` | `pnpm -r run clean` |
|
||||
|
||||
The root `scripts` section was rewritten to use `pnpm --filter @ohif/app run …`
|
||||
for app-targeted scripts and `pnpm -r run …` for monorepo-wide scripts.
|
||||
There is no `preinstall` script anymore.
|
||||
|
||||
## `.npmrc`
|
||||
|
||||
A new `.npmrc` at the repository root controls install behavior:
|
||||
|
||||
```ini
|
||||
frozen-lockfile=true
|
||||
```
|
||||
|
||||
CI installs error out if the lockfile would change. To update the lockfile
|
||||
locally, use `pnpm install --no-frozen-lockfile` (also exposed as the
|
||||
`install:update-lockfile` script).
|
||||
|
||||
## `pnpm-workspace.yaml`
|
||||
|
||||
Workspace membership moved out of `package.json` into a dedicated file:
|
||||
|
||||
```yaml
|
||||
packages:
|
||||
- platform/*
|
||||
- extensions/*
|
||||
- modes/*
|
||||
shamefullyHoist: true
|
||||
allowBuilds:
|
||||
'@scarf/scarf': true
|
||||
'@swc/core': true
|
||||
core-js: true
|
||||
core-js-pure: true
|
||||
cypress: true
|
||||
protobufjs: true
|
||||
sharp: true
|
||||
overrides:
|
||||
# pinned versions previously declared in package.json resolutions …
|
||||
```
|
||||
|
||||
Two settings worth highlighting:
|
||||
|
||||
- **`shamefullyHoist: true`** keeps the install layout flat, the way yarn
|
||||
v1 produced it. This is required because some OHIF dependencies expect
|
||||
to resolve transitive packages directly from `node_modules`.
|
||||
- **`allowBuilds`** is pnpm's allow-list for packages whose install scripts
|
||||
are allowed to run. If you add a dependency that ships a postinstall
|
||||
script (native bindings, optimized binaries, etc.) you must add it here
|
||||
or pnpm will skip the build.
|
||||
|
||||
The `addOns/externals/*` workspace entry from 3.12 is **removed**. The
|
||||
`dicom-microscopy-viewer` and externals devDependencies are now installed
|
||||
directly through `pnpm-workspace.yaml` overrides — no separate add-on
|
||||
install step is needed.
|
||||
|
||||
## Workspace dependency syntax
|
||||
|
||||
Intra-workspace dependencies now use the `workspace:*` protocol instead of
|
||||
hard-pinned version strings:
|
||||
|
||||
```diff
|
||||
"dependencies": {
|
||||
- "@ohif/core": "3.13.0-beta.72",
|
||||
- "@ohif/extension-cornerstone": "3.13.0-beta.72",
|
||||
- "@ohif/ui-next": "3.13.0-beta.72"
|
||||
+ "@ohif/core": "workspace:*",
|
||||
+ "@ohif/extension-cornerstone": "workspace:*",
|
||||
+ "@ohif/ui-next": "workspace:*"
|
||||
}
|
||||
```
|
||||
|
||||
When pnpm publishes a workspace package, `workspace:*` is rewritten to the
|
||||
actual version on disk, so downstream consumers continue to see normal
|
||||
semver ranges in published `package.json` files.
|
||||
|
||||
If you keep an OHIF fork with extra extensions in `extensions/`, you do
|
||||
**not** need to add them to `pnpm-workspace.yaml` — the glob pattern
|
||||
already covers them. Inside your extension's `package.json`, change any
|
||||
`@ohif/*` deps from hard versions to `workspace:*`.
|
||||
|
||||
## CLI changes
|
||||
|
||||
`platform/cli` (`@ohif/cli`) no longer wraps yarn:
|
||||
|
||||
- `getYarnInfo` and `uninstallNPMPackage` now shell out via `execa` to
|
||||
`npm` / `pnpm` directly rather than depending on the deprecated
|
||||
`yarn-programmatic` package.
|
||||
- The CLI invokes scripts with `pnpm run …` and instructs new extension
|
||||
authors to use pnpm.
|
||||
- The yarn dependency was removed from `platform/cli/package.json`.
|
||||
|
||||
If you previously ran extension/mode commands as `yarn run cli …`,
|
||||
switch to `pnpm run cli …`.
|
||||
|
||||
## CLI extension and mode templates
|
||||
|
||||
The `extension` and `mode` templates in `platform/cli/templates/*/dependencies.json`
|
||||
were updated:
|
||||
|
||||
```diff
|
||||
"engines": {
|
||||
- "node": ">=14",
|
||||
- "npm": ">=6",
|
||||
- "yarn": ">=1.18.0"
|
||||
+ "node": ">=24",
|
||||
+ "pnpm": "11.1.1"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
|
||||
- "dev:my-extension": "yarn run dev",
|
||||
+ "dev:my-extension": "pnpm rundev",
|
||||
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
|
||||
- "build:package": "yarn run build",
|
||||
- "start": "yarn run dev"
|
||||
+ "build:package": "pnpm runbuild",
|
||||
+ "start": "pnpm rundev"
|
||||
}
|
||||
```
|
||||
|
||||
> **Heads up**: the template's `pnpm rundev` / `pnpm runbuild` strings are
|
||||
> missing the space between `run` and the script name. If you generate a
|
||||
> new extension from the CLI, replace those with `pnpm run dev` and
|
||||
> `pnpm run build`.
|
||||
|
||||
## Audit and lockfile maintenance
|
||||
|
||||
- `yarn audit` and the `bun audit` ignore list have been replaced with a
|
||||
plain `pnpm audit` in the root script.
|
||||
- `yarn dlx`-style ad-hoc commands should use `pnpm dlx` instead.
|
||||
- Update CI cache keys: cache `~/.local/share/pnpm/store` (or the path
|
||||
reported by `pnpm store path`) keyed on `pnpm-lock.yaml`. Yarn cache
|
||||
paths are no longer populated.
|
||||
|
||||
## Quick migration checklist
|
||||
|
||||
1. Install Node 24 and pnpm 11 (or use Corepack).
|
||||
2. Delete `node_modules` and any `yarn.lock`/`addOns/yarn.lock` from your
|
||||
fork.
|
||||
3. Replace hard-pinned `@ohif/*` deps with `workspace:*` in your
|
||||
workspace packages.
|
||||
4. Update CI scripts to call `pnpm install --frozen-lockfile` and
|
||||
`pnpm run …`.
|
||||
5. Update your cache key to `pnpm-lock.yaml`.
|
||||
6. Regenerate any extensions you created from the CLI templates and fix
|
||||
the `pnpm rundev` / `pnpm runbuild` script names.
|
||||
@@ -177,11 +177,18 @@ the top level [`extensions/`][ext-source] directory.
|
||||
}
|
||||
```
|
||||
|
||||
:::note Important
|
||||
You SHOULD NOT directly register extensions in the `pluginConfig.json` file.
|
||||
Use the provided `cli` to add/remove/install/uninstall extensions. Read more [here](../../development/ohif-cli.md)
|
||||
:::note
|
||||
You can register extensions by editing the `pluginConfig.json` file directly.
|
||||
The provided `cli` can also add/remove/install/uninstall extensions
|
||||
([read more](../../development/ohif-cli.md)), but it is being phased out in
|
||||
favour of generating extensions with an agent.
|
||||
:::
|
||||
|
||||
For the full set of fields (`packageName`, `version`, `default`, `directory`,
|
||||
the `public` section) and the three ways a plugin can be located (in-tree,
|
||||
out-of-tree `directory`, or installed dependency), see the
|
||||
[pluginConfig.json reference](./pluginConfig.md).
|
||||
|
||||
The final registration and import of the extensions happen inside a non-tracked file `pluginImport.js` (this file is also for internal use only).
|
||||
|
||||
After an extension gets registered within the `viewer`,
|
||||
|
||||
@@ -0,0 +1,132 @@
|
||||
---
|
||||
sidebar_position: 6
|
||||
sidebar_label: pluginConfig.json
|
||||
title: pluginConfig.json Reference
|
||||
summary: Reference for platform/app/pluginConfig.json — the extensions, modes, and public arrays, every entry field (packageName, version, default, directory, and the public-entry import fields), and the three ways a plugin can be located (in-tree workspace, out-of-tree directory, or installed dependency).
|
||||
---
|
||||
|
||||
# pluginConfig.json Reference
|
||||
|
||||
`platform/app/pluginConfig.json` declares which extensions, modes, and
|
||||
third-party public assets are compiled into the viewer build. The build step
|
||||
([`writePluginImportsFile.js`](https://github.com/OHIF/Viewers/blob/master/platform/app/.webpack/writePluginImportsFile.js))
|
||||
reads it, resolves each entry to a source directory, generates the (untracked)
|
||||
`pluginImports.js`, and copies each plugin's static assets into `dist`.
|
||||
|
||||
:::note
|
||||
You can edit `pluginConfig.json` directly to add, remove, or configure plugins
|
||||
using the fields documented below. The [OHIF CLI](../../development/ohif-cli.md)
|
||||
can also manage entries, but it is being phased out in favour of generating
|
||||
extensions and modes with an agent.
|
||||
:::
|
||||
|
||||
## Top-level shape
|
||||
|
||||
```jsonc title="platform/app/pluginConfig.json"
|
||||
{
|
||||
"extensions": [ /* extension entries */ ],
|
||||
"modes": [ /* mode entries */ ],
|
||||
"public": [ /* third-party public-asset entries */ ]
|
||||
}
|
||||
```
|
||||
|
||||
| Key | Required | Description |
|
||||
| --- | --- | --- |
|
||||
| `extensions` | yes | Extensions to make available to the build. |
|
||||
| `modes` | yes | Modes (workflows) to make available to the build. |
|
||||
| `public` | no | Third-party packages whose prebuilt assets are copied/loaded at runtime (e.g. `dicom-microscopy-viewer`). Not registered as extensions or modes. |
|
||||
|
||||
## Extension / mode entry fields
|
||||
|
||||
An entry may be a bare string (the package name) or an object. The object form
|
||||
supports the following fields:
|
||||
|
||||
| Field | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `packageName` | string | — | The package's real name (matches its `package.json` `name`). Required unless `directory` alone identifies the plugin. |
|
||||
| `version` | string | — | Informational / used by the CLI for install bookkeeping. It does **not** affect build resolution. |
|
||||
| `default` | boolean | `true` | When `false`, the plugin is **not** added to the auto-registered set loaded at startup (`defaultExtensions` / `defaultModes`). It is still resolvable and can be loaded on demand — e.g. when a registered mode declares it as a required extension. |
|
||||
| `directory` | string | — | An explicit source directory for an out-of-tree plugin. See [Plugin locations](#plugin-locations). |
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"extensions": [
|
||||
// bare string form
|
||||
"@ohif/extension-default",
|
||||
|
||||
// object form, registered by default
|
||||
{ "packageName": "@ohif/extension-cornerstone", "version": "3.0.0" },
|
||||
|
||||
// present in the build but NOT auto-registered; loaded only when a
|
||||
// registered mode requires it
|
||||
{
|
||||
"packageName": "@ohif/extension-cornerstone-dicom-seg",
|
||||
"version": "3.0.0",
|
||||
"default": false
|
||||
}
|
||||
],
|
||||
"modes": [
|
||||
{ "packageName": "@ohif/mode-longitudinal" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## `public` entry fields
|
||||
|
||||
`public` entries are not extensions or modes — they describe third-party assets
|
||||
that are copied into `dist` and (optionally) imported at runtime via a global.
|
||||
|
||||
| Field | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `packageName` | string | Package name, used to resolve the asset directory from `node_modules` when `directory` is not given. |
|
||||
| `directory` | string | Source directory of the assets to copy. Resolved like the extension `directory` field (absolute, `~`-relative, or `.`-relative to the repo root). |
|
||||
| `importPath` | string | Path/URL the runtime loader `import()`s. Absolute (`http…` or `/…`) paths are used as-is; otherwise it is prefixed with `PUBLIC_URL`. |
|
||||
| `globalName` | string | If set, after importing `importPath` the loader returns `window[globalName]` (for UMD/global bundles). |
|
||||
| `importName` | string | Named export to return from the imported module. Defaults to `default`. Ignored when `globalName` is set. |
|
||||
| `to` | string | Destination subpath under `dist` for the copied assets. |
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"public": [
|
||||
{ "directory": "./platform/public" },
|
||||
{
|
||||
"packageName": "dicom-microscopy-viewer",
|
||||
"importPath": "dicom-microscopy-viewer/dicomMicroscopyViewer.min.js",
|
||||
"globalName": "dicomMicroscopyViewer",
|
||||
"directory": "./node_modules/dicom-microscopy-viewer/dist/dynamic-import",
|
||||
"to": "/dicom-microscopy-viewer/"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Plugin locations
|
||||
|
||||
Under pnpm, extensions and modes are **not** dependencies of `platform/app`.
|
||||
Every entry in `pluginConfig.json` is located one of three ways — only entries
|
||||
listed here are compiled in; workspace packages that are not listed are ignored.
|
||||
|
||||
1. **In-tree workspace** — a package under `extensions/` or `modes/`. Declare it
|
||||
by `packageName`; the build scans those workspaces and maps the declared name
|
||||
to its source directory. This is the common case the CLI sets up.
|
||||
2. **External, out-of-tree source** — a checkout outside this repo (e.g. an
|
||||
extension generated by the OHIF CLI). Add a `directory` field. The path may
|
||||
be absolute, `~`-relative to the home directory, or `.`-relative to the repo
|
||||
root.
|
||||
|
||||
```jsonc
|
||||
{ "packageName": "@acme/extension-foo", "directory": "~/dev/extension-foo" }
|
||||
```
|
||||
3. **Installed dependency** — add the package to the **root `package.json`** as a
|
||||
normal dependency and declare it by `packageName` (no `directory`). It then
|
||||
resolves from `node_modules` like any other installed package, and its
|
||||
`public/` and `dist/` assets are copied from there. This is the path used for
|
||||
third-party packages such as `dicom-microscopy-viewer`.
|
||||
|
||||
```jsonc
|
||||
{ "packageName": "@acme/extension-foo", "version": "1.2.3" }
|
||||
```
|
||||
|
||||
For the build internals behind these (alias generation, asset copying, the
|
||||
pnpm + Rspack migration), see the
|
||||
[build tooling migration guide](../../migration-guide/3p12-to-3p13/build-tooling.md#plugin-resolution-from-source-writepluginimportsfilejs).
|
||||
@@ -451,11 +451,17 @@ find the `modes` to register.
|
||||
}
|
||||
```
|
||||
|
||||
:::note Important
|
||||
You SHOULD NOT directly register modes in the `pluginConfig.json` file.
|
||||
Use the provided `cli` to add/remove/install/uninstall modes. Read more [here](../../development/ohif-cli.md)
|
||||
:::note
|
||||
You can register modes by editing the `pluginConfig.json` file directly.
|
||||
The provided `cli` can also add/remove/install/uninstall modes
|
||||
([read more](../../development/ohif-cli.md)), but it is being phased out in
|
||||
favour of generating modes with an agent.
|
||||
:::
|
||||
|
||||
For the full set of entry fields and the three ways a plugin can be located
|
||||
(in-tree, out-of-tree `directory`, or installed dependency), see the
|
||||
[pluginConfig.json reference](../extensions/pluginConfig.md).
|
||||
|
||||
The final registration and import of the modes happen inside a non-tracked file `pluginImport.js` (this file is also for internal use only).
|
||||
|
||||
|
||||
|
||||
+14
-23
@@ -5,12 +5,12 @@
|
||||
"scripts": {
|
||||
"docusaurus": "docusaurus",
|
||||
"clean": "shx rm -rf dist",
|
||||
"clean:deep": "yarn run clean && shx rm -rf node_modules",
|
||||
"clean:deep": "pnpm run clean && shx rm -rf node_modules",
|
||||
"start": "docusaurus start --port 8001",
|
||||
"dev": "docusaurus clear && docusaurus start --port 8001",
|
||||
"docs": "docusaurus start --port 8001",
|
||||
"build": "docusaurus build && yarn run prepare-markdown-files && yarn run generate-llms-txt && yarn run generate-llms-full-txt",
|
||||
"build:docs": "docusaurus build && yarn run prepare-markdown-files && yarn run generate-llms-txt && yarn run generate-llms-full-txt",
|
||||
"build": "docusaurus build && pnpm run prepare-markdown-files && pnpm run generate-llms-txt && pnpm run generate-llms-full-txt",
|
||||
"build:docs": "docusaurus build && pnpm run prepare-markdown-files && pnpm run generate-llms-txt && pnpm run generate-llms-full-txt",
|
||||
"prepare-markdown-files": "node ./scripts/prepare-markdown-files.js",
|
||||
"generate-llms-txt": "node ./scripts/generate-llms-txt.js",
|
||||
"generate-llms-full-txt": "node ./scripts/generate-llms-full-txt.js",
|
||||
@@ -21,18 +21,6 @@
|
||||
"write-translations": "docusaurus write-translations",
|
||||
"write-heading-ids": "docusaurus write-heading-ids"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.5%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@docusaurus/core": "3.7.0",
|
||||
"@docusaurus/faster": "3.7.0",
|
||||
@@ -96,13 +84,16 @@
|
||||
"typescript": "5.5.4",
|
||||
"url-loader": "4.1.1"
|
||||
},
|
||||
"resolutions": {
|
||||
"qs": "6.14.1",
|
||||
"lodash": "4.17.23",
|
||||
"webpack": "5.105.0",
|
||||
"sharp": "0.34.5",
|
||||
"serialize-javascript": "7.0.4",
|
||||
"rollup": "2.80.0",
|
||||
"svgo": "3.3.3"
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.5%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
-12736
File diff suppressed because it is too large.
Load diff
@@ -32,9 +32,11 @@ module.exports = (env, argv) => {
|
||||
sideEffects: false,
|
||||
},
|
||||
output: {
|
||||
library: {
|
||||
name: 'ohif-i18n',
|
||||
type: 'umd',
|
||||
},
|
||||
path: ROOT_DIR,
|
||||
library: 'ohif-i18n',
|
||||
libraryTarget: 'umd',
|
||||
filename: pkg.main,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -8,9 +8,7 @@
|
||||
"main": "dist/ohif-i18n.umd.js",
|
||||
"module": "src/index.js",
|
||||
"engines": {
|
||||
"node": ">=14",
|
||||
"npm": ">=6",
|
||||
"yarn": ">=1.16.0"
|
||||
"node": ">=24"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
@@ -21,11 +19,11 @@
|
||||
},
|
||||
"scripts": {
|
||||
"clean": "shx rm -rf dist",
|
||||
"clean:deep": "yarn run clean && shx rm -rf node_modules",
|
||||
"dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
|
||||
"dev:i18n": "yarn run dev",
|
||||
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
|
||||
"build:package": "yarn run build",
|
||||
"clean:deep": "pnpm run clean && shx rm -rf node_modules",
|
||||
"dev": "cross-env NODE_ENV=development rspack build --config .webpack/webpack.dev.js --watch",
|
||||
"dev:i18n": "pnpm run dev",
|
||||
"build": "cross-env NODE_ENV=production rspack build --config .webpack/webpack.prod.js",
|
||||
"build:package": "pnpm run build",
|
||||
"pullTranslations": "./pullTranslations.sh",
|
||||
"test:unit": "echo 'platform/i18n: missing unit tests'",
|
||||
"test:unit:ci": "echo 'platform/i18n: missing unit tests'"
|
||||
@@ -44,6 +42,7 @@
|
||||
"locize-lastused": "1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"cross-env": "7.0.3",
|
||||
"i18next": "17.3.1",
|
||||
"i18next-browser-languagedetector": "3.1.1",
|
||||
"react": "18.3.1",
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
const { merge } = require('webpack-merge');
|
||||
const path = require('path');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const rspack = require('@rspack/core');
|
||||
const MiniCssExtractPlugin = rspack.CssExtractRspackPlugin;
|
||||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
|
||||
|
||||
const webpackCommon = require('./../../../.webpack/webpack.base.js');
|
||||
@@ -36,9 +37,11 @@ module.exports = (env, argv) => {
|
||||
sideEffects: false,
|
||||
},
|
||||
output: {
|
||||
library: {
|
||||
name: 'ohif-ui',
|
||||
type: 'umd',
|
||||
},
|
||||
path: ROOT_DIR,
|
||||
library: 'ohif-ui',
|
||||
libraryTarget: 'umd',
|
||||
filename: pkg.main,
|
||||
},
|
||||
externals: [
|
||||
|
||||
@@ -2,30 +2,31 @@
|
||||
"name": "@ohif/ui-next",
|
||||
"version": "3.13.0-beta.89",
|
||||
"description": "Next version of OHIF Viewers UI, more customizable using shadcn/ui",
|
||||
"author": "OHIF",
|
||||
"license": "MIT",
|
||||
"main": "dist/ohif-ui-next.umd.js",
|
||||
"module": "src/index.ts",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
"exports": {
|
||||
"./tailwind.config": "./tailwind.config.js",
|
||||
"./lib/*": "./src/lib/*.ts",
|
||||
"./components/*": "./src/components/*.tsx",
|
||||
".": "./src/index.ts"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"README.md"
|
||||
],
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"scripts": {
|
||||
"clean": "shx rm -rf dist",
|
||||
"clean:deep": "yarn run clean && shx rm -rf node_modules",
|
||||
"start": "yarn run build --watch",
|
||||
"clean:deep": "pnpm run clean && shx rm -rf node_modules",
|
||||
"start": "pnpm run build --watch",
|
||||
"dev": "cross-env NODE_ENV=development rspack build --config .webpack/webpack.dev.js --watch",
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"test:unit": "jest --watchAll",
|
||||
"test:unit:ci": "jest --ci --runInBand --collectCoverage",
|
||||
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
|
||||
"build:package": "yarn run build"
|
||||
},
|
||||
"exports": {
|
||||
"./tailwind.config": "./tailwind.config.ts",
|
||||
"./lib/*": "./src/lib/*.ts",
|
||||
"./components/*": "./src/components/*.tsx",
|
||||
".": "./src/index.ts"
|
||||
"build": "cross-env NODE_ENV=production rspack build --config .webpack/webpack.prod.js",
|
||||
"build:package": "pnpm run build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/react-accordion": "1.2.11",
|
||||
@@ -66,9 +67,8 @@
|
||||
"tailwindcss-animate": "1.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/plugin-transform-private-property-in-object": "7.29.7"
|
||||
"@babel/plugin-transform-private-property-in-object": "7.29.7",
|
||||
"cross-env": "7.0.3"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "OHIF",
|
||||
"license": "MIT"
|
||||
"keywords": []
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
const { merge } = require('webpack-merge');
|
||||
const path = require('path');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const rspack = require('@rspack/core');
|
||||
const MiniCssExtractPlugin = rspack.CssExtractRspackPlugin;
|
||||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
|
||||
|
||||
const webpackCommon = require('./../../../.webpack/webpack.base.js');
|
||||
@@ -36,9 +37,11 @@ module.exports = (env, argv) => {
|
||||
sideEffects: false,
|
||||
},
|
||||
output: {
|
||||
library: {
|
||||
name: 'ohif-ui',
|
||||
type: 'umd',
|
||||
},
|
||||
path: ROOT_DIR,
|
||||
library: 'ohif-ui',
|
||||
libraryTarget: 'umd',
|
||||
filename: pkg.main,
|
||||
},
|
||||
externals: [
|
||||
|
||||
Binary file not shown.
@@ -10,9 +10,7 @@
|
||||
"access": "public"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14",
|
||||
"npm": ">=6",
|
||||
"yarn": ">=1.16.0"
|
||||
"node": ">=24"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
@@ -20,10 +18,10 @@
|
||||
],
|
||||
"scripts": {
|
||||
"clean": "shx rm -rf dist",
|
||||
"clean:deep": "yarn run clean && shx rm -rf node_modules",
|
||||
"start": "yarn run build --watch",
|
||||
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
|
||||
"build:package": "yarn run build"
|
||||
"clean:deep": "pnpm run clean && shx rm -rf node_modules",
|
||||
"start": "pnpm run build --watch",
|
||||
"build": "cross-env NODE_ENV=production rspack build --config .webpack/webpack.prod.js",
|
||||
"build:package": "pnpm run build"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "18.3.1",
|
||||
@@ -57,14 +55,12 @@
|
||||
"react-select": "5.7.4",
|
||||
"react-test-renderer": "18.3.1",
|
||||
"react-window": "1.8.11",
|
||||
"react-with-direction": "1.4.0",
|
||||
"webpack": "5.105.0"
|
||||
"react-with-direction": "1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.29.7",
|
||||
"autoprefixer": "10.4.21",
|
||||
"babel-loader": "8.4.1",
|
||||
"dotenv-webpack": "1.8.0",
|
||||
"postcss": "8.5.6",
|
||||
"postcss-loader": "6.2.1",
|
||||
"prop-types": "15.8.1",
|
||||
|
||||
Reference in new issue
Block a user