github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(frontend): upgrade frontend dependencies DTD-11 (#6244) 

* upgrade webpack, eslint, storybook and other dependencies
pull/5002/head
Richard Wei 2021-12-17 07:52:54 +13:00 committed by GitHub
parent 730fdb160d
commit 187b66f5cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 3444 additions and 4460 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.eslintrc.yml
View File

@ -9,6 +9,7 @@ globals:
extends: extends:
- 'eslint:recommended' - 'eslint:recommended'
- 'plugin:storybook/recommended'
- prettier - prettier
plugins: plugins:
@ -60,6 +61,7 @@ overrides:
- 'plugin:@typescript-eslint/recommended' - 'plugin:@typescript-eslint/recommended'
- 'plugin:@typescript-eslint/eslint-recommended' - 'plugin:@typescript-eslint/eslint-recommended'
- 'plugin:promise/recommended' - 'plugin:promise/recommended'
- 'plugin:storybook/recommended'
- prettier # should be last - prettier # should be last
settings: settings:
react: react:
@ -83,6 +85,8 @@ overrides:
'@typescript-eslint/no-unused-vars': 'error' '@typescript-eslint/no-unused-vars': 'error'
'@typescript-eslint/no-explicit-any': 'error' '@typescript-eslint/no-explicit-any': 'error'
'jsx-a11y/label-has-associated-control': ['error', { 'assert': 'either' }] 'jsx-a11y/label-has-associated-control': ['error', { 'assert': 'either' }]
'react/function-component-definition': ['error', { 'namedComponents': 'function-declaration' }]
'react/jsx-no-bind': off
- files: - files:
- app/**/*.test.* - app/**/*.test.*
extends: extends:

3
.storybook/main.js
View File

@ -28,4 +28,7 @@ module.exports = {
]; ];
return config; return config;
}, },
core: {
builder: 'webpack5',
},
}; };

8
app/docker/views/services/edit/serviceController.js
View File

@ -353,11 +353,9 @@ angular.module('portainer.docker').controller('ServiceController', [
const registryChanged = $scope.initialRegistryID != newRegistryID; const registryChanged = $scope.initialRegistryID != newRegistryID;
if ($scope.WebhookExists && registryChanged) { if ($scope.WebhookExists && registryChanged) {
WebhookService.updateServiceWebhook($scope.webhookID, newRegistryID) WebhookService.updateServiceWebhook($scope.webhookID, newRegistryID).catch(function error(err) {
.then(function success() {}) Notifications.error('Failure', err, 'Unable to update webhook');
.catch(function error(err) { });
Notifications.error('Failure', err, 'Unable to update webhook');
});
} }
}; };

14
app/index.html
View File

@ -18,12 +18,12 @@
<![endif]--> <![endif]-->
<!-- Fav and touch icons --> <!-- Fav and touch icons -->
<link rel="apple-touch-icon" sizes="180x180" href="${require('./assets/ico/apple-touch-icon.png')}" /> <link rel="apple-touch-icon" sizes="180x180" href="<%=require('./assets/ico/apple-touch-icon.png')%>" />
<link rel="icon" type="image/png" sizes="32x32" href="${require('./assets/ico/favicon-32x32.png')}" /> <link rel="icon" type="image/png" sizes="32x32" href="<%=require('./assets/ico/favicon-32x32.png')%>" />
<link rel="icon" type="image/png" sizes="16x16" href="${require('./assets/ico/favicon-16x16.png')}" /> <link rel="icon" type="image/png" sizes="16x16" href="<%=require('./assets/ico/favicon-16x16.png')%>" />
<link rel="mask-icon" href="${require('./assets/ico/safari-pinned-tab.svg')}" color="#5bbad5" /> <link rel="mask-icon" href="<%=require('./assets/ico/safari-pinned-tab.svg')%>" color="#5bbad5" />
<link rel="shortcut icon" href="${require('./assets/ico/favicon.ico')}" /> <link rel="shortcut icon" href="<%=require('./assets/ico/favicon.ico')%>" />
<meta name="msapplication-config" content="${require('./assets/ico/browserconfig.xml')}" /> <meta name="msapplication-config" content="<%=require('./assets/ico/browserconfig.xml')%>" />
<meta name="theme-color" content="#ffffff" /> <meta name="theme-color" content="#ffffff" />
</head> </head>
@ -47,7 +47,7 @@
<!-- loading box logo --> <!-- loading box logo -->
<div class="row"> <div class="row">
<img ng-if="logo" ng-src="{{ logo }}" class="simple-box-logo" /> <img ng-if="logo" ng-src="{{ logo }}" class="simple-box-logo" />
<img ng-if="!logo" src="${require('./assets/images/logo_alt.svg')}" class="simple-box-logo" alt="Portainer" /> <img ng-if="!logo" src="<%=require('./assets/images/logo_alt.svg')%>" class="simple-box-logo" alt="Portainer" />
</div> </div>
<!-- !loading box logo --> <!-- !loading box logo -->
<!-- panel --> <!-- panel -->

1
app/index.js
View File

@ -1,5 +1,4 @@
import './assets/css'; import './assets/css';
import '@babel/polyfill';
import angular from 'angular'; import angular from 'angular';
import { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid'; import { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid';

6
app/portainer/components/BoxSelector/BoxSelector.stories.tsx
View File

@ -14,7 +14,9 @@ const meta: Meta = {
export default meta; export default meta;
export function Example() { export { Example, LimitedFeature };
function Example() {
const [value, setValue] = useState(3); const [value, setValue] = useState(3);
const options: BoxSelectorOption<number>[] = [ const options: BoxSelectorOption<number>[] = [
{ {
@ -45,7 +47,7 @@ export function Example() {
); );
} }
export function LimitedFeature() { function LimitedFeature() {
initFeatureService(Edition.CE); initFeatureService(Edition.CE);
const [value, setValue] = useState(3); const [value, setValue] = useState(3);
const options: BoxSelectorOption<number>[] = [ const options: BoxSelectorOption<number>[] = [

4
app/portainer/components/Header/Breadcrumbs/Breadcrumbs.stories.tsx
View File

@ -12,7 +12,9 @@ const meta: Meta = {
export default meta; export default meta;
export function Example() { export { Example };
function Example() {
return ( return (
<UIRouter plugins={[pushStateLocationPlugin]}> <UIRouter plugins={[pushStateLocationPlugin]}>
<Breadcrumbs> <Breadcrumbs>

10
app/portainer/components/Header/Header.stories.tsx
View File

@ -1,4 +1,5 @@
import { Meta, Story } from '@storybook/react'; import { Meta, Story } from '@storybook/react';
import { useMemo } from 'react';
import { Link } from '@/portainer/components/Link'; import { Link } from '@/portainer/components/Link';
import { UserContext } from '@/portainer/hooks/useUser'; import { UserContext } from '@/portainer/hooks/useUser';
@ -19,10 +20,13 @@ interface StoryProps {
} }
function Template({ title }: StoryProps) { function Template({ title }: StoryProps) {
const state = useMemo(
() => ({ user: new UserViewModel({ Username: 'test' }) }),
[]
);
return ( return (
<UserContext.Provider <UserContext.Provider value={state}>
value={{ user: new UserViewModel({ Username: 'test' }) }}
>
<Header> <Header>
<HeaderTitle title={title} /> <HeaderTitle title={title} />
<HeaderContent> <HeaderContent>

3
app/portainer/components/ReactExample.stories.tsx
View File

@ -9,12 +9,13 @@ const meta: Meta = {
}; };
export default meta; export default meta;
export { Example };
interface Props { interface Props {
text: string; text: string;
} }
export function Example({ text }: Props) { function Example({ text }: Props) {
return ( return (
<UIRouter plugins={[pushStateLocationPlugin]}> <UIRouter plugins={[pushStateLocationPlugin]}>
<ReactExample text={text} /> <ReactExample text={text} />

4
app/portainer/components/form-components/ButtonSelector/ButtonSelector.stories.tsx
View File

@ -8,7 +8,9 @@ export default {
title: 'Components/ButtonSelector', title: 'Components/ButtonSelector',
} as Meta; } as Meta;
export function TwoOptionsSelector() { export { TwoOptionsSelector };
function TwoOptionsSelector() {
const options: Option<string>[] = [ const options: Option<string>[] = [
{ value: 'sAMAccountName', label: 'username' }, { value: 'sAMAccountName', label: 'username' },
{ value: 'userPrincipalName', label: 'user@domainname' }, { value: 'userPrincipalName', label: 'user@domainname' },

6
app/portainer/components/form-components/FormControl/FormControl.stories.tsx
View File

@ -14,7 +14,9 @@ interface TextFieldProps {
tooltip?: string; tooltip?: string;
} }
export function TextField({ label, tooltip = '' }: TextFieldProps) { export { TextField, SelectField };
function TextField({ label, tooltip = '' }: TextFieldProps) {
const [value, setValue] = useState(''); const [value, setValue] = useState('');
const inputId = 'input'; const inputId = 'input';
return ( return (
@ -29,7 +31,7 @@ TextField.args = {
tooltip: '', tooltip: '',
}; };
export function SelectField({ label, tooltip = '' }: TextFieldProps) { function SelectField({ label, tooltip = '' }: TextFieldProps) {
const options = [ const options = [
{ value: 1, label: 'one' }, { value: 1, label: 'one' },
{ value: 2, label: 'two' }, { value: 2, label: 'two' },

8
app/portainer/components/form-components/InputGroup/InputGroup.stories.tsx
View File

@ -8,7 +8,9 @@ export default {
title: 'Components/Form/InputGroup', title: 'Components/Form/InputGroup',
} as Meta; } as Meta;
export function BasicExample() { export { BasicExample, Addons, Sizing };
function BasicExample() {
const [value1, setValue1] = useState(''); const [value1, setValue1] = useState('');
const [valueNumber, setValueNumber] = useState(0); const [valueNumber, setValueNumber] = useState(0);
@ -58,7 +60,7 @@ export function BasicExample() {
); );
} }
export function Addons() { function Addons() {
const [value1, setValue1] = useState(''); const [value1, setValue1] = useState('');
const [value2, setValue2] = useState(''); const [value2, setValue2] = useState('');
return ( return (
@ -85,7 +87,7 @@ export function Addons() {
); );
} }
export function Sizing() { function Sizing() {
const [value, setValue] = useState(''); const [value, setValue] = useState('');
return ( return (
<div className="space-y-8"> <div className="space-y-8">

6
app/portainer/components/form-components/InputList/InputList.stories.tsx
View File

@ -12,7 +12,9 @@ const meta: Meta = {
export default meta; export default meta;
export function Defaults() { export { Defaults, ListWithInputAndSelect };
function Defaults() {
const [values, setValues] = useState<DefaultType[]>([{ value: '' }]); const [values, setValues] = useState<DefaultType[]>([{ value: '' }]);
return ( return (
@ -35,7 +37,7 @@ interface ListWithInputAndSelectArgs {
movable: boolean; movable: boolean;
tooltip: string; tooltip: string;
} }
export function ListWithInputAndSelect({ function ListWithInputAndSelect({
label, label,
movable, movable,
tooltip, tooltip,

14
app/portainer/components/widget/Widget.stories.tsx
View File

@ -28,13 +28,9 @@ const meta: Meta<WidgetProps> = {
export default meta; export default meta;
export function Default({ export { Default, WidgetWithCustomImage, WidgetWithTaskBar };
loading,
bodyText, function Default({ loading, bodyText, footerText, icon, title }: WidgetProps) {
footerText,
icon,
title,
}: WidgetProps) {
return ( return (
<Widget> <Widget>
<WidgetTitle title={title} icon={icon} /> <WidgetTitle title={title} icon={icon} />
@ -44,7 +40,7 @@ export function Default({
); );
} }
export function WidgetWithCustomImage({ function WidgetWithCustomImage({
loading, loading,
bodyText, bodyText,
footerText, footerText,
@ -73,7 +69,7 @@ WidgetWithCustomImage.args = {
icon: 'https://via.placeholder.com/150', icon: 'https://via.placeholder.com/150',
}; };
export function WidgetWithTaskBar({ function WidgetWithTaskBar({
loading, loading,
bodyText, bodyText,
footerText, footerText,

18
app/portainer/hooks/useUser.tsx
View File

@ -6,6 +6,7 @@ import {
useContext, useContext,
useEffect, useEffect,
useState, useState,
useMemo,
} from 'react'; } from 'react';
import { getUser } from '@/portainer/services/api/userService'; import { getUser } from '@/portainer/services/api/userService';
@ -15,7 +16,7 @@ import { UserViewModel } from '../models/user';
import { useLocalStorage } from './useLocalStorage'; import { useLocalStorage } from './useLocalStorage';
interface State { interface State {
user?: UserViewModel; user?: UserViewModel | null;
} }
const state: State = {}; const state: State = {};
@ -70,10 +71,13 @@ interface AuthorizedProps {
children: ReactNode; children: ReactNode;
} }
export function Authorized({ authorizations, children }: AuthorizedProps) { export function Authorized({
authorizations,
children,
}: AuthorizedProps): ReactNode {
const isAllowed = useAuthorizations(authorizations); const isAllowed = useAuthorizations(authorizations);
return isAllowed ? <>{children}</> : null; return isAllowed ? children : null;
} }
interface UserProviderProps { interface UserProviderProps {
@ -94,16 +98,20 @@ export function UserProvider({ children }: UserProviderProps) {
} }
}, [jwt]); }, [jwt]);
const providerState = useMemo(() => ({ user }), [user]);
if (jwt === '') { if (jwt === '') {
return null; return null;
} }
if (user === null) { if (providerState.user === null) {
return null; return null;
} }
return ( return (
<UserContext.Provider value={{ user }}>{children}</UserContext.Provider> <UserContext.Provider value={providerState}>
{children}
</UserContext.Provider>
); );
async function loadUser(id: number) { async function loadUser(id: number) {

140
package.json
View File

@ -64,25 +64,24 @@
}, },
"dependencies": { "dependencies": {
"@aws-crypto/sha256-js": "^2.0.0", "@aws-crypto/sha256-js": "^2.0.0",
"@babel/polyfill": "^7.2.5", "@fortawesome/fontawesome-free": "^5.15.4",
"@fortawesome/fontawesome-free": "^5.11.2",
"@nxmix/tokenize-ansi": "^3.0.0", "@nxmix/tokenize-ansi": "^3.0.0",
"@uirouter/angularjs": "1.0.11", "@uirouter/angularjs": "1.0.11",
"@uirouter/react": "^1.0.7", "@uirouter/react": "^1.0.7",
"@uirouter/react-hybrid": "^1.0.4", "@uirouter/react-hybrid": "^1.0.4",
"angular": "1.8.0", "angular": "1.8.2",
"angular-clipboard": "^1.6.2", "angular-clipboard": "^1.6.2",
"angular-file-saver": "^1.1.3", "angular-file-saver": "^1.1.3",
"angular-json-tree": "1.0.1", "angular-json-tree": "1.1.0",
"angular-jwt": "~0.1.8", "angular-jwt": "~0.1.8",
"angular-loading-bar": "~0.9.0", "angular-loading-bar": "~0.9.0",
"angular-local-storage": "~0.5.2", "angular-local-storage": "~0.5.2",
"angular-messages": "1.8.0", "angular-messages": "1.8.2",
"angular-mocks": "1.8.0", "angular-mocks": "1.8.2",
"angular-moment-picker": "^0.10.2", "angular-moment-picker": "^0.10.2",
"angular-multiselect": "github:portainer/angular-multi-select#semver:~v4.0.1", "angular-multiselect": "github:portainer/angular-multi-select#semver:~v4.0.1",
"angular-resource": "1.8.0", "angular-resource": "1.8.2",
"angular-sanitize": "1.8.0", "angular-sanitize": "1.8.2",
"angular-ui-bootstrap": "~2.5.0", "angular-ui-bootstrap": "~2.5.0",
"angular-utils-pagination": "~0.11.1", "angular-utils-pagination": "~0.11.1",
"angularjs-scroll-glue": "^2.2.0", "angularjs-scroll-glue": "^2.2.0",
@ -90,30 +89,30 @@
"angulartics": "^1.6.0", "angulartics": "^1.6.0",
"axios": "^0.24.0", "axios": "^0.24.0",
"babel-plugin-angularjs-annotate": "^0.10.0", "babel-plugin-angularjs-annotate": "^0.10.0",
"bootbox": "^5.4.0", "bootbox": "^5.5.2",
"bootstrap": "^3.4.0", "bootstrap": "^3.4.0",
"chardet": "^1.3.0", "buffer": "^6.0.3",
"chardet": "^1.4.0",
"chart.js": "~2.7.0", "chart.js": "~2.7.0",
"clsx": "^1.1.1", "clsx": "^1.1.1",
"codemirror": "~5.30.0", "codemirror": "~5.64.0",
"core-js": "^3.16.3", "core-js": "^3.19.3",
"fast-json-patch": "^3.0.0-1", "fast-json-patch": "^3.1.0",
"filesize": "~3.3.0", "filesize": "~3.3.0",
"filesize-parser": "^1.5.0", "filesize-parser": "^1.5.0",
"jquery": "^3.5.1", "jquery": "^3.6.0",
"js-base64": "^3.6.0", "js-base64": "^3.7.2",
"js-yaml": "^3.14.0", "js-yaml": "^3.14.0",
"jwt-decode": "^3.1.2", "jwt-decode": "^3.1.2",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"moment": "^2.21.0", "moment": "^2.29.1",
"ng-file-upload": "~12.2.13", "ng-file-upload": "~12.2.13",
"parse-duration": "^1.0.0", "parse-duration": "^1.0.2",
"rc-slider": "^9.7.4", "rc-slider": "^9.7.5",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-tooltip": "^4.2.21", "react-tooltip": "^4.2.21",
"sanitize-html": "^2.5.3", "sanitize-html": "^2.5.3",
"source-map-loader": "^1.1.2",
"spinkit": "^2.0.1", "spinkit": "^2.0.1",
"splitargs": "github:deviantony/splitargs#semver:~0.2.0", "splitargs": "github:deviantony/splitargs#semver:~0.2.0",
"strip-ansi": "^6.0.0", "strip-ansi": "^6.0.0",
@ -122,61 +121,63 @@
"uuid": "^3.3.2", "uuid": "^3.3.2",
"x256": "^0.0.2", "x256": "^0.0.2",
"xterm": "^3.8.0", "xterm": "^3.8.0",
"yaml": "^1.10.0" "yaml": "^1.10.2"
}, },
"devDependencies": { "devDependencies": {
"@apidevtools/swagger-cli": "^4.0.4", "@apidevtools/swagger-cli": "^4.0.4",
"@babel/core": "^7.1.2", "@babel/core": "^7.16.0",
"@babel/preset-env": "^7.1.0", "@babel/preset-env": "^7.16.4",
"@babel/preset-react": "^7.14.5", "@babel/preset-react": "^7.16.0",
"@babel/preset-typescript": "^7.15.0", "@babel/preset-typescript": "^7.16.0",
"@simbathesailor/use-what-changed": "^2.0.0", "@simbathesailor/use-what-changed": "^2.0.0",
"@storybook/addon-actions": "^6.3.11", "@storybook/addon-actions": "^6.4.9",
"@storybook/addon-essentials": "^6.3.11", "@storybook/addon-essentials": "^6.4.9",
"@storybook/addon-links": "^6.3.11", "@storybook/addon-links": "^6.4.9",
"@storybook/addon-postcss": "^2.0.0", "@storybook/addon-postcss": "^2.0.0",
"@storybook/react": "^6.3.11", "@storybook/builder-webpack5": "^6.4.9",
"@testing-library/jest-dom": "^5.14.1", "@storybook/manager-webpack5": "^6.4.9",
"@storybook/react": "^6.4.9",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2", "@testing-library/react": "^12.1.2",
"@types/angular": "^1.8.3", "@types/angular": "^1.8.3",
"@types/bootbox": "^5.2.2", "@types/bootbox": "^5.2.2",
"@types/jest": "^27.0.2", "@types/jest": "^27.0.3",
"@types/jquery": "^3.5.6", "@types/jquery": "^3.5.10",
"@types/lodash-es": "^4.17.5", "@types/lodash-es": "^4.17.5",
"@types/react": "^17.0.27", "@types/react": "^17.0.37",
"@types/react-dom": "^17.0.9", "@types/react-dom": "^17.0.11",
"@types/sanitize-html": "^2.5.0", "@types/sanitize-html": "^2.5.0",
"@types/toastr": "^2.1.39", "@types/toastr": "^2.1.39",
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.7.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.7.0",
"auto-ngtemplate-loader": "^2.0.1", "auto-ngtemplate-loader": "^2.0.1",
"autoprefixer": "^7.1.1", "autoprefixer": "^7.1.1",
"babel-jest": "^27.1.0", "babel-jest": "^27.4.2",
"babel-loader": "^8.0.4", "babel-loader": "^8.2.3",
"babel-plugin-lodash": "^3.3.4", "babel-plugin-lodash": "^3.3.4",
"clean-terminal-webpack-plugin": "^1.1.0", "clean-terminal-webpack-plugin": "^3.0.0",
"clean-webpack-plugin": "^0.1.19", "clean-webpack-plugin": "^4.0.0",
"css-loader": "5", "css-loader": "5",
"cssnano": "^4.1.10", "cssnano": "^4.1.10",
"cypress": "^5.2.0", "cypress": "8.7",
"cypress-wait-until": "^1.7.1", "cypress-wait-until": "^1.7.1",
"dotenv-webpack": "^7.0.3", "dotenv-webpack": "^7.0.3",
"eslint": "^7.29.0", "eslint": "^8.4.1",
"eslint-config-airbnb": "^18.2.1", "eslint-config-airbnb": "^19.0.2",
"eslint-config-airbnb-typescript": "^14.0.1", "eslint-config-airbnb-typescript": "^16.1.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-import-resolver-alias": "^1.1.2", "eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-eslint-comments": "^3.2.0", "eslint-plugin-eslint-comments": "^3.2.0",
"eslint-plugin-import": "^2.24.2", "eslint-plugin-import": "^2.25.3",
"eslint-plugin-jest": "^24.4.0", "eslint-plugin-jest": "^25.3.0",
"eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-promise": "^5.1.1", "eslint-plugin-promise": "^5.2.0",
"eslint-plugin-react": "^7.24.0", "eslint-plugin-react": "^7.27.1",
"eslint-plugin-react-hooks": "^4.2.0", "eslint-plugin-react-hooks": "^4.3.0",
"eslint-webpack-plugin": "^2.5.4", "eslint-plugin-storybook": "^0.5.3",
"file-loader": "^1.1.11", "eslint-webpack-plugin": "^3.1.1",
"grunt": "^1.1.0", "grunt": "^1.4.1",
"grunt-cli": "^1.3.2", "grunt-cli": "^1.4.3",
"grunt-contrib-clean": "^2.0.0", "grunt-contrib-clean": "^2.0.0",
"grunt-contrib-copy": "^1.0.0", "grunt-contrib-copy": "^1.0.0",
"grunt-env": "^0.4.4", "grunt-env": "^0.4.4",
@ -185,36 +186,35 @@
"grunt-replace": "^1.0.1", "grunt-replace": "^1.0.1",
"grunt-shell-spawn": "^0.4.0", "grunt-shell-spawn": "^0.4.0",
"grunt-usemin": "^3.1.1", "grunt-usemin": "^3.1.1",
"grunt-webpack": "^3.1.3", "grunt-webpack": "^5.0.0",
"gruntify-eslint": "^3.1.0", "gruntify-eslint": "^3.1.0",
"html-loader": "^0.5.5", "html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^5.5.0",
"husky": ">=4", "husky": ">=4",
"image-webpack-loader": "^4.5.0", "jest": "^27.4.3",
"jest": "^27.1.0",
"lint-staged": ">=10", "lint-staged": ">=10",
"load-grunt-tasks": "^3.5.2", "load-grunt-tasks": "^3.5.2",
"lodash-webpack-plugin": "^0.11.5", "lodash-webpack-plugin": "^0.11.6",
"mini-css-extract-plugin": "1", "mini-css-extract-plugin": "1",
"ngtemplate-loader": "^2.0.1", "ngtemplate-loader": "^2.1.0",
"plop": "^2.6.0", "plop": "^2.6.0",
"postcss": "7", "postcss": "7",
"postcss-loader": "4", "postcss-loader": "4",
"prettier": "^2.0.2", "prettier": "^2.5.1",
"react-query": "^3.34.3", "react-query": "^3.34.3",
"react-test-renderer": "^17.0.2", "react-test-renderer": "^17.0.2",
"speed-measure-webpack-plugin": "^1.2.3", "source-map-loader": "^3.0.0",
"speed-measure-webpack-plugin": "^1.5.0",
"storybook-css-modules-preset": "^1.1.1", "storybook-css-modules-preset": "^1.1.1",
"style-loader": "2", "style-loader": "2",
"swagger2openapi": "^7.0.8", "swagger2openapi": "^7.0.8",
"tsconfig-paths-webpack-plugin": "^3.5.1", "tsconfig-paths-webpack-plugin": "^3.5.2",
"typescript": "^4.4.3", "typescript": "^4.5.2",
"url-loader": "^1.1.1", "webpack": "^5.65.0",
"webpack": "^4.26.0", "webpack-build-notifier": "^2.3.0",
"webpack-build-notifier": "^0.1.30", "webpack-cli": "^4.9.1",
"webpack-cli": "^3.1.2", "webpack-dev-server": "^4.6.0",
"webpack-dev-server": "^3.11.0", "webpack-merge": "^5.8.0"
"webpack-merge": "^4.1.4"
}, },
"resolutions": { "resolutions": {
"jquery": "^3.5.1", "jquery": "^3.5.1",
@ -232,4 +232,4 @@
"pre-commit": "lint-staged" "pre-commit": "lint-staged"
} }
} }
} }

24
webpack/webpack.common.js
View File

@ -4,7 +4,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackBuildNotifierPlugin = require('webpack-build-notifier'); const WebpackBuildNotifierPlugin = require('webpack-build-notifier');
const CleanTerminalPlugin = require('clean-terminal-webpack-plugin'); const CleanTerminalPlugin = require('clean-terminal-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin'); const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin'); const ESLintPlugin = require('eslint-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
@ -18,13 +18,14 @@ module.exports = {
main: './app', main: './app',
}, },
output: { output: {
filename: '[name].[hash].js', filename: '[name].[contenthash].js',
path: path.resolve(projectRoot, 'dist/public'), path: path.resolve(projectRoot, 'dist/public'),
}, },
module: { module: {
rules: [ rules: [
{ {
test: /\.js$/, test: /\.js$/,
type: 'javascript/auto',
enforce: 'pre', enforce: 'pre',
use: [ use: [
{ {
@ -59,7 +60,7 @@ module.exports = {
{ {
test: /.xml$/, test: /.xml$/,
use: 'file-loader', type: 'asset/resource',
}, },
{ {
test: /\.css$/, test: /\.css$/,
@ -82,14 +83,18 @@ module.exports = {
], ],
}, },
devServer: { devServer: {
contentBase: path.join(__dirname, '.tmp'), static: {
directory: path.join(__dirname, 'public'),
},
compress: true, compress: true,
port: 8999, port: 8999,
proxy: { proxy: {
'/api': 'http://localhost:9000', '/api': 'http://localhost:9000',
}, },
open: true, open: true,
writeToDisk: true, devMiddleware: {
writeToDisk: true,
},
}, },
plugins: [ plugins: [
new Dotenv(), new Dotenv(),
@ -118,11 +123,11 @@ module.exports = {
jsyaml: 'js-yaml', jsyaml: 'js-yaml',
}), }),
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: '[name].[hash].css', filename: '[name].[contenthash].css',
chunkFilename: '[name].[id].css', chunkFilename: '[name].[id].css',
}), }),
new CleanWebpackPlugin(['dist/public']), new CleanWebpackPlugin(),
new IgnorePlugin(/^\.\/locale$/, /moment$/), new IgnorePlugin({ resourceRegExp: /^.\/locale$/, contextRegExp: /moment$/ }),
// new BundleAnalyzerPlugin() // new BundleAnalyzerPlugin()
new LodashModuleReplacementPlugin({ new LodashModuleReplacementPlugin({
shorthands: true, shorthands: true,
@ -131,7 +136,10 @@ module.exports = {
}), }),
], ],
optimization: { optimization: {
moduleIds: 'deterministic',
runtimeChunk: 'single',
splitChunks: { splitChunks: {
chunks: 'all',
cacheGroups: { cacheGroups: {
vendor: { vendor: {
test: /node_modules/, test: /node_modules/,

11
webpack/webpack.develop.js
View File

@ -1,19 +1,14 @@
const webpackMerge = require('webpack-merge'); const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common.js'); const commonConfig = require('./webpack.common.js');
module.exports = webpackMerge(commonConfig, { module.exports = merge(commonConfig, {
mode: 'development', mode: 'development',
devtool: 'eval-source-map', devtool: 'eval-source-map',
module: { module: {
rules: [ rules: [
{ {
test: /\.(woff|woff2|eot|ttf|svg|ico|png|jpg|gif)$/, test: /\.(woff|woff2|eot|ttf|svg|ico|png|jpg|gif)$/,
use: [ type: 'asset/resource',
{
loader: 'file-loader',
// options: { limit: 25000 }
},
],
}, },
], ],
}, },

19
webpack/webpack.production.js
View File

@ -1,29 +1,18 @@
const webpackMerge = require('webpack-merge'); const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common.js'); const commonConfig = require('./webpack.common.js');
module.exports = webpackMerge(commonConfig, { module.exports = merge(commonConfig, {
mode: 'production', mode: 'production',
devtool: 'source-map', devtool: 'source-map',
module: { module: {
rules: [ rules: [
{ {
test: /\.(woff|woff2|eot|ttf|ico)$/, test: /\.(woff|woff2|eot|ttf|ico)$/,
use: [ type: 'asset/inline',
{
loader: 'url-loader',
options: { limit: 25000 },
},
],
}, },
{ {
test: /\.(gif|png|jpe?g|svg)$/i, test: /\.(gif|png|jpe?g|svg)$/i,
use: [ type: 'asset/resource',
'file-loader',
{
loader: 'image-webpack-loader',
options: {},
},
],
}, },
], ],
}, },

4
webpack/webpack.testing.js
View File

@ -1,6 +1,6 @@
const webpackMerge = require('webpack-merge'); const { merge } = require('webpack-merge');
const productionConfig = require('./webpack.production'); const productionConfig = require('./webpack.production');
module.exports = webpackMerge(productionConfig, { module.exports = merge(productionConfig, {
optimization: { nodeEnv: 'testing' }, optimization: { nodeEnv: 'testing' },
}); });

7597
yarn.lock
View File

File diff suppressed because it is too large Load Diff