TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Upgrade to webpack 5, fix conflicting issues with react-router under docusaurus with yarn workspaces

Browse Source
This commit is contained in:
Erik Ziegler 2021-07-08 15:23:09 +02:00
parent de412f2eef
commit 825e13bcf3
20 changed files with 825 additions and 1992 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
.webpack/webpack.base.js
View File

@ -14,7 +14,6 @@ const TerserJSPlugin = require('terser-webpack-plugin');
const NODE_ENV = process.env.NODE_ENV;
const QUICK_BUILD = process.env.QUICK_BUILD;
const BUILD_NUM = process.env.CIRCLE_BUILD_NUM || '0';
const { UnusedFilesWebpackPlugin } = require("unused-files-webpack-plugin");
//
dotenv.config();
@ -30,7 +29,7 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
const config = {
mode: isProdBuild ? 'production' : 'development',
devtool: isProdBuild ? 'source-map' : 'cheap-module-eval-source-map',
devtool: isProdBuild ? 'source-map' : 'eval',
entry: {
app: `${SRC_DIR}/index.js`,
},
@ -55,9 +54,16 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
transpileJavaScriptRule(mode),
loadWebWorkersRule,
loadShadersRule,
{
test: /\.m?js/,
resolve: {
fullySpecified: false,
},
},
],
},
resolve: {
mainFields: ['browser', 'module', 'main'],
alias: {
// Viewer project
'@': path.resolve(__dirname, '../platform/viewer/src'),
@ -81,6 +87,7 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
extensions: ['.js', '.jsx', '.json', '*'],
// symlinked resources are resolved to their real path, not their symlinked location
symlinks: true,
fallback: { fs: false, path: false },
},
plugins: [
new webpack.DefinePlugin({
@ -89,7 +96,9 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
'process.env.DEBUG': JSON.stringify(process.env.DEBUG),
'process.env.APP_CONFIG': JSON.stringify(process.env.APP_CONFIG || ''),
'process.env.PUBLIC_URL': JSON.stringify(process.env.PUBLIC_URL || '/'),
'process.env.VERSION_NUMBER': JSON.stringify(process.env.VERSION_NUMBER || PACKAGE.version || ''),
'process.env.VERSION_NUMBER': JSON.stringify(
process.env.VERSION_NUMBER || PACKAGE.version || ''
),
'process.env.BUILD_NUM': JSON.stringify(BUILD_NUM),
/* i18n */
'process.env.USE_LOCIZE': JSON.stringify(process.env.USE_LOCIZE || ''),
@ -99,25 +108,16 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
'process.env.LOCIZE_API_KEY': JSON.stringify(
process.env.LOCIZE_API_KEY || ''
),
}),
new UnusedFilesWebpackPlugin({
failOnUnused: false,
globOptions: {
ignore: [
"node_modules/**/*",
"index.umd.js",
"sanity.test.js",
"__mocks__/fileMock.js",
"__tests__/globalSetup.js"
]
}
'process.env.REACT_APP_I18N_DEBUG': JSON.stringify(
process.env.REACT_APP_I18N_DEBUG || ''
),
}),
],
// Fix: https://github.com/webpack-contrib/css-loader/issues/447#issuecomment-285598881
// For issue in cornerstone-wado-image-loader
node: {
/*node: {
fs: 'empty',
},
},*/
};
if (isProdBuild) {

4
extensions/cornerstone/package.json
View File

@ -39,8 +39,8 @@
"dicom-parser": "^1.8.3",
"hammerjs": "^2.0.8",
"prop-types": "^15.6.2",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-resize-detector": "^3.4.0"
},
"dependencies": {

4
extensions/default/package.json
View File

@ -35,7 +35,9 @@
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-i18next": "^10.11.0",
"webpack": "^4.0.0",
"react-router": "next",
"react-router-dom": "next",
"webpack": "^5.43.0",
"webpack-merge": "^5.7.3"
},
"dependencies": {

9
extensions/default/src/ViewerLayout/index.jsx
View File

@ -12,7 +12,7 @@ import {
import i18n from '@ohif/i18n';
import { hotkeys } from '@ohif/core';
import { useNavigate } from 'react-router-dom';
const { availableLanguages, defaultLanguage, currentLanguage } = i18n;
@ -91,6 +91,11 @@ function ViewerLayout({
ViewportGridComp,
}) {
const [appConfig] = useAppConfig();
const navigate = useNavigate();
const onClickReturnButton = () => {
navigate('/')
};
const { t } = useTranslation();
const { show, hide } = useModal();
@ -176,7 +181,7 @@ function ViewerLayout({
return (
<div>
<Header menuOptions={menuOptions} WhiteLabeling={appConfig.whiteLabeling} >
<Header menuOptions={menuOptions} onClickReturnButton={onClickReturnButton} WhiteLabeling={appConfig.whiteLabeling} >
<ErrorBoundary context="Primary Toolbar">
<div className="relative flex justify-center">
<Toolbar servicesManager={servicesManager} />

2
extensions/dicom-sr/package.json
View File

@ -39,7 +39,7 @@
"dicom-parser": "^1.8.3",
"hammerjs": "^2.0.8",
"prop-types": "^15.6.2",
"react": "^16.11.0",
"react": "^17.0.2",
"react-cornerstone-viewport": "4.0.5"
},
"dependencies": {

2
extensions/measurement-tracking/package.json
View File

@ -36,7 +36,7 @@
"react": "^16.13.1",
"react-cornerstone-viewport": "^4.0.5",
"react-dom": "^16.13.1",
"webpack": "^4.0.0",
"webpack": "^5.43.0",
"webpack-merge": "^5.7.3"
},
"dependencies": {

2
modes/longitudinal/package.json
View File

@ -35,7 +35,7 @@
"@babel/runtime": "7.7.6"
},
"devDependencies": {
"webpack": "^5.21.2",
"webpack": "^5.43.0",
"webpack-merge": "^5.7.3"
}
}

27
package.json
View File

@ -32,7 +32,6 @@
"test:unit": "jest --collectCoverage",
"test:unit:ci": "lerna run test:unit:ci --parallel --stream",
"test:e2e": "lerna run test:e2e --stream",
"test:e2e:script-tag": "lerna run test:e2e:script-tag --stream",
"test:e2e:ci": "lerna run test:e2e:ci --stream",
"test:e2e:dist": "lerna run test:e2e:dist --stream",
"test:e2e:serve": "lerna run test:e2e:serve --stream",
@ -50,11 +49,11 @@
"@babel/runtime": "7.7.6",
"core-js": "^3.2.1",
"cornerstone-core": "2.3.0",
"react": "16.11.0",
"react-dom": "16.11.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"shader-loader": "^1.3.1",
"webpack": "^4.35.2",
"worker-loader": "^2.0.0",
"webpack": "^5.43.0",
"worker-loader": "^3.0.8",
"wslink": "^0.1.8"
},
"devDependencies": {
@ -73,7 +72,7 @@
"babel-plugin-inline-react-svg": "1.1.0",
"babel-plugin-module-resolver": "^3.2.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.0.3",
"copy-webpack-plugin": "^9.0.1",
"cross-env": "^5.2.0",
"css-loader": "^3.2.0",
"dotenv": "^8.1.0",
@ -88,8 +87,8 @@
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "7.x",
"eslint-plugin-react-hooks": "4.2.0",
"extract-css-chunks-webpack-plugin": "^4.5.4",
"html-webpack-plugin": "^3.2.0",
"extract-css-chunks-webpack-plugin": "^4.9.0",
"html-webpack-plugin": "^5.3.2",
"husky": "^3.0.0",
"jest": "^24.8.0",
"jest-canvas-mock": "^2.1.0",
@ -102,18 +101,16 @@
"postcss-loader": "^4.0.3",
"postcss-preset-env": "^6.6.0",
"prettier": "^1.18.2",
"react-hot-loader": "^4.12.21",
"react-hot-loader": "^4.13.0",
"serve": "^11.1.0",
"start-server-and-test": "^1.10.0",
"style-loader": "^1.0.0",
"terser-webpack-plugin": "^2.1.0",
"unused-files-webpack-plugin": "^3.4.0",
"terser-webpack-plugin": "^5.1.4",
"unused-webpack-plugin": "2.4.0",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2",
"webpack-cli": "^4.7.2",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.1",
"workbox-webpack-plugin": "^5.0.0-beta.1"
"webpack-merge": "^5.7.3",
"workbox-webpack-plugin": "^6.1.5"
},
"husky": {
"hooks": {

4
platform/core/src/services/UserAuthenticationService/UserAuthenticationService.js
View File

@ -16,8 +16,8 @@ const serviceImplementation = {
_getState: () => console.warn('getState() NOT IMPLEMENTED'),
_setUser: () => console.warn('_setUser() NOT IMPLEMENTED'),
_getUser: () => console.warn('_setUser() NOT IMPLEMENTED'),
_getAuthorizationHeader: () =>
console.warn('_getAuthorizationHeader() NOT IMPLEMENTED'),
_getAuthorizationHeader: () => {}, // TODO: have enabled/disabled state?
//console.warn('_getAuthorizationHeader() NOT IMPLEMENTED'),
_handleUnauthenticated: () =>
console.warn('_handleUnauthenticated() NOT IMPLEMENTED'),
_reset: () => console.warn('reset() NOT IMPLEMENTED'),

14
platform/docs/package.json
View File

@ -2,6 +2,16 @@
"name": "ohif-docs",
"version": "0.0.0",
"private": true,
"workspaces": {
"nohoist": [
"@docusaurus/core/**",
"@docusaurus/core",
"@docusaurus/preset-classic",
"@docusaurus/preset-classic/**",
"**/react-router-dom",
"**/react-router"
]
},
"scripts": {
"docusaurus": "docusaurus",
"start": "docusaurus start --port 8001",
@ -30,8 +40,8 @@
"url-loader": "^4.1.1"
},
"peerDependencies": {
"react": "^16.11.0",
"react-dom": "^16.11.0"
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"browserslist": {
"production": [

8
platform/i18n/package.json
View File

@ -31,8 +31,8 @@
"peerDependencies": {
"i18next": "^17.0.3",
"i18next-browser-languagedetector": "^3.0.1",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^10.11.0"
},
"dependencies": {
@ -44,8 +44,8 @@
"devDependencies": {
"i18next": "^17.0.3",
"i18next-browser-languagedetector": "^3.0.1",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^10.11.0",
"webpack-merge": "^5.7.3"
}

8
platform/ui/package.json
View File

@ -32,11 +32,11 @@
"classnames": "2.2.6",
"lodash.debounce": "4.0.8",
"moment": "2.24.0",
"react": "16.11.0",
"react": "17.0.2",
"react-dates": "^21.8.0",
"react-dnd": "10.0.2",
"react-dnd-html5-backend": "10.0.2",
"react-dom": "16.11.0",
"react-dnd": "14.0.2",
"react-dnd-html5-backend": "14.0.0",
"react-dom": "17.0.2",
"react-draggable": "4.4.3",
"react-error-boundary": "^3.1.3",
"react-modal": "3.11.2",

14
platform/ui/src/components/Header/Header.jsx
View File

@ -2,19 +2,16 @@ import React from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import classNames from 'classnames';
// TODO: This may fail if package is split from PWA build
import { useNavigate } from 'react-router-dom';
import { NavBar, Svg, Icon, IconButton, Dropdown } from '@ohif/ui';
function Header({ children, menuOptions, isReturnEnabled, isSticky, WhiteLabeling }) {
function Header({ children, menuOptions, isReturnEnabled, onClickReturnButton, isSticky, WhiteLabeling }) {
const { t } = useTranslation('Header');
const navigate = useNavigate();
// TODO: this should be passed in as a prop instead and the react-router-dom
// dependency should be dropped
const onReturnHandler = () => {
if (isReturnEnabled) {
navigate('/');
const onClickReturn = () => {
if (isReturnEnabled && onClickReturnButton) {
onClickReturnButton()
}
};
@ -30,7 +27,7 @@ function Header({ children, menuOptions, isReturnEnabled, isSticky, WhiteLabelin
// Either injected service? Or context (like react router's `useLocation`?) */}
<div
className={classNames("inline-flex items-center mr-3", isReturnEnabled && 'cursor-pointer')}
onClick={onReturnHandler}
onClick={onClickReturn}
>
{isReturnEnabled && <Icon name="chevron-left" className="w-8 text-primary-active" />}
<div className="ml-4">{WhiteLabeling ? CustomLogo(React) : <Svg name="logo-ohif" />}</div>
@ -78,6 +75,7 @@ Header.propTypes = {
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
isReturnEnabled: PropTypes.bool,
isSticky: PropTypes.bool,
onClickReturnButton: PropTypes.func,
WhiteLabeling: PropTypes.element,
};

1
platform/ui/src/components/Thumbnail/Thumbnail.jsx
View File

@ -24,6 +24,7 @@ const Thumbnail = ({
// this will still allow for "drag", even if there is no drop target for the
// specified item.
const [collectedProps, drag, dragPreview] = useDrag({
type: "displayset",
item: { ...dragData },
canDrag: function(monitor) {
return Object.keys(dragData).length !== 0;

1
platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx
View File

@ -18,6 +18,7 @@ const ThumbnailNoImage = ({
isActive,
}) => {
const [collectedProps, drag, dragPreview] = useDrag({
type: "displayset",
item: { ...dragData },
canDrag: function(monitor) {
return Object.keys(dragData).length !== 0;

3
platform/ui/src/contextProviders/DragAndDropProvider.jsx
View File

@ -1,7 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { DndProvider } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import { HTML5Backend } from 'react-dnd-html5-backend';
// import TouchBackend from 'react-dnd-touch-backend';
// TODO: this is false when it should not be :thinking:

57
platform/viewer/.webpack/webpack.pwa.js
View File

@ -27,6 +27,8 @@ const PROXY_DOMAIN = process.env.PROXY_DOMAIN;
const ENTRY_TARGET = process.env.ENTRY_TARGET || `${SRC_DIR}/index.js`;
const Dotenv = require('dotenv-webpack');
console.warn(path.resolve(__dirname, '../node_modules'));
module.exports = (env, argv) => {
const baseConfig = webpackBase(env, argv, { SRC_DIR, DIST_DIR });
const isProdBuild = process.env.NODE_ENV === 'production';
@ -44,6 +46,15 @@ module.exports = (env, argv) => {
module: {
rules: [...extractStyleChunksRule(isProdBuild)],
},
resolve: {
modules: [
// Modules specific to this package
path.resolve(__dirname, '../node_modules'),
// Hoisted Yarn Workspace Modules
path.resolve(__dirname, '../../../node_modules'),
SRC_DIR,
],
},
plugins: [
new Dotenv(),
// Uncomment to generate bundle analyzer
@ -51,27 +62,31 @@ module.exports = (env, argv) => {
// Clean output.path
new CleanWebpackPlugin(),
// Copy "Public" Folder to Dist
new CopyWebpackPlugin([
{
from: PUBLIC_DIR,
to: DIST_DIR,
toType: 'dir',
// Ignore our HtmlWebpackPlugin template file
// Ignore our configuration files
ignore: ['config/*', 'html-templates/*', '.DS_Store'],
},
// 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`,
},
]),
new CopyWebpackPlugin({
patterns: [
{
from: PUBLIC_DIR,
to: DIST_DIR,
toType: 'dir',
globOptions: {
// Ignore our HtmlWebpackPlugin template file
// Ignore our configuration files
ignore: ['config/*', 'html-templates/*', '.DS_Store'],
},
},
// 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`,
},
],
}),
// https://github.com/faceyspacey/extract-css-chunks-webpack-plugin#webpack-4-standalone-installation
new ExtractCssChunksPlugin({
filename: isProdBuild ? '[name].[hash].css' : '[name].css',

16
platform/viewer/package.json
View File

@ -20,13 +20,12 @@
"build:viewer": "cross-env NODE_ENV=production node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.pwa.js --progress",
"build:viewer:ci": "cross-env NODE_ENV=production PUBLIC_URL=/ APP_CONFIG=config/netlify.js QUICK_BUILD=true node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.pwa.js",
"build:viewer:demo": "cross-env NODE_ENV=production APP_CONFIG=config/demo.js HTML_TEMPLATE=rollbar.html QUICK_BUILD=true node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --progress --config .webpack/webpack.pwa.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config .webpack/webpack.pwa.js --watch",
"dev:orthanc": "cross-env NODE_ENV=development PROXY_TARGET=/dicom-web PROXY_DOMAIN=http://localhost:8042 APP_CONFIG=config/docker_nginx-orthanc.js webpack-dev-server --config .webpack/webpack.pwa.js --watch",
"dev": "cross-env NODE_ENV=development webpack serve --config .webpack/webpack.pwa.js",
"dev:orthanc": "cross-env NODE_ENV=development PROXY_TARGET=/dicom-web PROXY_DOMAIN=http://localhost:8042 APP_CONFIG=config/docker_nginx-orthanc.js webpack serve --config .webpack/webpack.pwa.js",
"dev:viewer": "yarn run dev",
"start": "yarn run dev",
"test:e2e": "cypress open",
"test:e2e:ci": "percy exec -- cypress run --config video=false --record --browser chrome --spec 'cypress/integration/visual-regression/**/*'",
"test:e2e:script-tag": "cypress run --config video=false --browser chrome --spec 'cypress/integration/common/**/*,cypress/integration/script-tag/**/*'",
"test:e2e:local": "cypress run --config video=false --browser chrome --spec 'cypress/integration/common/**/*,cypress/integration/pwa/**/*'",
"test:e2e:dist": "start-server-and-test test:e2e:serve http://localhost:3000 test:e2e:ci",
"test:e2e:serve": "serve -n -l 3000 -s dist",
@ -40,9 +39,8 @@
],
"peerDependencies": {
"cornerstone-core": "^2.3.0",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"webpack": "^4.0.0"
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"dependencies": {
"@babel/runtime": "7.7.6",
@ -77,13 +75,15 @@
"react-router-dom": "next"
},
"devDependencies": {
"webpack": "^5.43.0",
"webpack-cli": "^4.7.2",
"@percy/cypress": "^2.3.0",
"cypress-file-upload": "^3.5.3",
"cypress": "^6.4.0",
"cypress-file-upload": "^3.5.3",
"identity-obj-proxy": "3.0.x",
"lodash": "4.17.15",
"terser-webpack-plugin": "^5.1.1",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-bundle-analyzer": "^4.4.2",
"webpack-merge": "^5.7.3"
}
}

6
platform/viewer/src/history.js
View File

@ -1,6 +0,0 @@
// TODO: replace with HistoryRouter https://github.com/ReactTraining/react-router/pull/7586
import { createBrowserHistory, createHashHistory } from 'history';
const useHashRouting = JSON.parse(process.env.USE_HASH_ROUTER);
const router = useHashRouting ? createHashHistory() : createBrowserHistory();
export default router;

2601
yarn.lock
View File

File diff suppressed because it is too large Load Diff