Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2026-03-06 12:20:56 +01:00
Code Issues Packages Projects Releases Activity

Update to webpack v5 (#1848)

Browse Source 
Update webpack in the following components to version 5:

ui-styles (StyleGuide)
ui-components (Storybook)
ui-scripts (gradle run/build)
This change will also fix a circular dependency between ui-api and ui-components.

Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
This commit is contained in:
Sebastian Sdorra
2021-11-10 10:10:17 +01:00
committed by GitHub
parent f69d3a29a8
commit 2938074e1a
28 changed files with 1603 additions and 1049 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gradle/changelog/concurrent_modification.yaml Normal file
View File

@@ -0,0 +1,2 @@
- type: fixed
description: Concurrent modification error in SVN modify command ([#1849](https://github.com/scm-manager/scm-manager/pull/1849))

2
gradle/changelog/logout_endless_loop.yaml Normal file
View File

@@ -0,0 +1,2 @@
- type: fixed
description: Fix logout endless loop on slow connections

4
package.json
View File

@@ -6,8 +6,8 @@
"scm-plugins/*"
],
"scripts": {
"build": "webpack --mode=production --config=scm-ui/ui-scripts/src/webpack.config.js",
"build:dev": "webpack --mode=development --config=scm-ui/ui-scripts/src/webpack.config.js",
"build": "webpack-cli --mode=production --config=scm-ui/ui-scripts/src/webpack.config.js",
"build:dev": "webpack-cli --mode=development --config=scm-ui/ui-scripts/src/webpack.config.js",
"test": "lerna run --scope '@scm-manager/ui-*' test",
"e2e-tests": "lerna run --scope '@scm-manager/e2e-tests' ci",
"typecheck": "lerna run --scope '@scm-manager/ui-*' typecheck",

4
scm-plugins/scm-git-plugin/package.json
View File

@@ -16,8 +16,8 @@
"devDependencies": {
"@scm-manager/babel-preset": "^2.12.0",
"@scm-manager/eslint-config": "^2.11.1",
"@scm-manager/jest-preset": "^2.12.7",
"@scm-manager/plugin-scripts": "^1.0.1",
"@scm-manager/jest-preset": "^2.13.0",
"@scm-manager/plugin-scripts": "^1.2.1",
"@scm-manager/prettier-config": "^2.11.1",
"@types/react": "^17.0.1"
},

4
scm-plugins/scm-hg-plugin/package.json
View File

@@ -15,8 +15,8 @@
"devDependencies": {
"@scm-manager/babel-preset": "^2.12.0",
"@scm-manager/eslint-config": "^2.11.1",
"@scm-manager/jest-preset": "^2.12.7",
"@scm-manager/plugin-scripts": "^1.0.1",
"@scm-manager/jest-preset": "^2.13.0",
"@scm-manager/plugin-scripts": "^1.2.1",
"@scm-manager/prettier-config": "^2.11.1",
"@types/react": "^17.0.1"
},

4
scm-plugins/scm-legacy-plugin/package.json
View File

@@ -15,8 +15,8 @@
"devDependencies": {
"@scm-manager/babel-preset": "^2.12.0",
"@scm-manager/eslint-config": "^2.11.1",
"@scm-manager/jest-preset": "^2.12.7",
"@scm-manager/plugin-scripts": "^1.0.1",
"@scm-manager/jest-preset": "^2.13.0",
"@scm-manager/plugin-scripts": "^1.2.1",
"@scm-manager/prettier-config": "^2.11.1",
"@types/react": "^17.0.1"
},

4
scm-plugins/scm-svn-plugin/package.json
View File

@@ -15,8 +15,8 @@
"devDependencies": {
"@scm-manager/babel-preset": "^2.12.0",
"@scm-manager/eslint-config": "^2.11.1",
"@scm-manager/jest-preset": "^2.12.7",
"@scm-manager/plugin-scripts": "^1.0.1",
"@scm-manager/jest-preset": "^2.13.0",
"@scm-manager/plugin-scripts": "^1.2.1",
"@scm-manager/prettier-config": "^2.11.1",
"@types/react": "^17.0.1"
},

2
scm-ui/ui-api/package.json
View File

@@ -17,7 +17,7 @@
"devDependencies": {
"@scm-manager/babel-preset": "^2.12.0",
"@scm-manager/eslint-config": "^2.10.1",
"@scm-manager/jest-preset": "^2.12.7",
"@scm-manager/jest-preset": "^2.13.0",
"@scm-manager/prettier-config": "^2.10.1",
"@scm-manager/tsconfig": "^2.12.0",
"@testing-library/react-hooks": "^5.0.3",

2
scm-ui/ui-api/src/admin.ts
View File

@@ -25,7 +25,7 @@
import { ApiResult, useIndexLink } from "./base";
import { UpdateInfo } from "@scm-manager/ui-types";
import { useQuery } from "react-query";
import { apiClient } from "@scm-manager/ui-components";
import { apiClient } from "./apiclient";
export const useUpdateInfo = (): ApiResult<UpdateInfo | null> => {
const indexLink = useIndexLink("updateInfo");

2
scm-ui/ui-api/src/config.ts
View File

@@ -25,7 +25,7 @@
import { ApiResult, useIndexLink } from "./base";
import { Config } from "@scm-manager/ui-types";
import { useMutation, useQuery, useQueryClient } from "react-query";
import { apiClient } from "@scm-manager/ui-components";
import { apiClient } from "./apiclient";
import { requiredLink } from "./links";
export const useConfig = (): ApiResult<Config> => {

2
scm-ui/ui-api/src/plugins.ts
View File

@@ -25,7 +25,7 @@
import { ApiResult, useIndexLink, useRequiredIndexLink } from "./base";
import { isPluginCollection, PendingPlugins, Plugin, PluginCollection } from "@scm-manager/ui-types";
import { useMutation, useQuery, useQueryClient } from "react-query";
import { apiClient } from "@scm-manager/ui-components";
import { apiClient } from "./apiclient";
import { requiredLink } from "./links";
type WaitForRestartOptions = {

3
scm-ui/ui-api/src/repository-roles.ts
View File

@@ -24,7 +24,8 @@
import { ApiResult, useRequiredIndexLink } from "./base";
import { RepositoryRole, RepositoryRoleCollection, RepositoryRoleCreation } from "@scm-manager/ui-types";
import { useMutation, useQuery, useQueryClient } from "react-query";
import { apiClient, urls } from "@scm-manager/ui-components";
import { apiClient } from "./apiclient";
import * as urls from "./urls";
import { createQueryString } from "./utils";
import { requiredLink } from "./links";

3
scm-ui/ui-api/src/sources.ts
View File

@@ -23,7 +23,8 @@
*/
import { File, Link, Repository } from "@scm-manager/ui-types";
import { requiredLink } from "./links";
import { apiClient, urls } from "@scm-manager/ui-components";
import { apiClient } from "./apiclient";
import * as urls from "./urls";
import { useInfiniteQuery } from "react-query";
import { repoQueryKey } from "./keys";
import { useEffect } from "react";

17
scm-ui/ui-components/.storybook/RemoveThemesPlugin.js
View File

@@ -31,10 +31,21 @@ class RemoveThemesPlugin {
HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync(
'RemoveThemesPlugin',
(data, cb) => {
if (data.assets.css) {
data.assets.css = data.assets.css.filter(css => css.startsWith("ui-theme-"))
// remove generated style-loader bundles from the page
// there should be a better way, which does not generate the bundles at all
// but for now it works
if (data.assets.js) {
data.assets.js = data.assets.js.filter(bundle => !bundle.startsWith("ui-theme-"))
.filter(bundle => !bundle.startsWith("runtime~ui-theme-"))
}
data.assets.css = [];
// remove css links to avoid conflicts with the themes
// so we remove all and add our own via preview-head.html
if (data.assets.css) {
data.assets.css = data.assets.css.filter(css => !css.startsWith("ui-theme-"))
}
// Tell webpack to move on
cb(null, data)
}

31
scm-ui/ui-components/.storybook/main.js
View File

@@ -34,47 +34,44 @@ const themedir = path.join(root, "ui-styles", "src");
const themes = fs
.readdirSync(themedir)
.map((filename) => path.parse(filename))
.filter((p) => p.ext === ".scss")
.reduce((entries, current) => ({ ...entries, [current.name]: path.join(themedir, current.base) }), {});
.map(filename => path.parse(filename))
.filter(p => p.ext === ".scss")
.reduce((entries, current) => ({ ...entries, [`ui-theme-${current.name}`]: path.join(themedir, current.base) }), {});
// .map(f => path.join(themedir, f.base));
module.exports = {
core: {
builder: "webpack5"
},
typescript: { reactDocgen: false },
stories: ["../src/**/*.stories.tsx"],
addons: ["storybook-addon-i18next", "storybook-addon-themes"],
webpackFinal: async (config) => {
webpackFinal: async config => {
// add our themes to webpack entry points
config.entry = {
main: config.entry,
...themes,
};
// fix usage of web workers
// required for diff with syntax highlighting
config.plugins.push(new WorkerPlugin());
// create separate css files for our themes
config.plugins.push(
new MiniCssExtractPlugin({
filename: "ui-theme-[name].css",
filename: "[name].css",
ignoreOrder: false
}),
})
);
config.module.rules.push({
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
],
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
});
// the html-webpack-plugin adds the generated css to iframe,
// the html-webpack-plugin adds the generated css and js files to the iframe,
// which overrides our manually loaded css files.
// So we use a custom plugin which uses a hook of html-webpack-plugin
// to filter our themes from the output.
config.plugins.push(new RemoveThemesPlugin());
return config;
},
}
};

7
scm-ui/ui-components/package.json
View File

@@ -22,12 +22,14 @@
"devDependencies": {
"@scm-manager/babel-preset": "^2.12.0",
"@scm-manager/eslint-config": "^2.13.0",
"@scm-manager/jest-preset": "^2.12.7",
"@scm-manager/jest-preset": "^2.13.0",
"@scm-manager/prettier-config": "^2.10.1",
"@scm-manager/tsconfig": "^2.12.0",
"@scm-manager/ui-tests": "^2.26.2-SNAPSHOT",
"@storybook/addon-actions": "^6.3.12",
"@storybook/addon-storyshots": "^6.3.12",
"@storybook/builder-webpack5": "^6.3.12",
"@storybook/manager-webpack5": "^6.3.12",
"@storybook/react": "^6.3.12",
"@types/classnames": "^2.2.9",
"@types/css": "^0.0.31",
@@ -51,13 +53,16 @@
"enzyme-context-react-router-4": "^2.0.0",
"fetch-mock": "^7.5.1",
"gitdiff-parser": "^0.1.2",
"html-webpack-plugin": "^5.5.0",
"i18next-fetch-backend": "^2.2.0",
"mini-css-extract-plugin": "^1.6.2",
"raf": "^3.4.0",
"react-test-renderer": "^17.0.1",
"sass-loader": "^12.3.0",
"storybook-addon-i18next": "^1.3.0",
"storybook-addon-themes": "^6.1.0",
"to-camel-case": "^1.0.0",
"webpack": "^5.61.0",
"worker-plugin": "^3.2.0"
},
"dependencies": {

3
scm-ui/ui-components/src/repos/TokenizedDiffView.tsx
View File

@@ -61,7 +61,8 @@ const DiffView = styled(Diff)`
`;
// WebWorker which creates tokens for syntax highlighting
const tokenize = new Worker("./Tokenize.worker.ts", { name: "tokenizer", type: "module" });
// @ts-ignore
const tokenize = new Worker(new URL("./Tokenize.worker.ts", import.meta.url), { name: "tokenizer", type: "module" });
tokenize.postMessage({ theme });
type Props = {

2
scm-ui/ui-extensions/package.json
View File

@@ -16,7 +16,7 @@
"devDependencies": {
"@scm-manager/babel-preset": "^2.12.0",
"@scm-manager/eslint-config": "^2.12.0",
"@scm-manager/jest-preset": "^2.12.7",
"@scm-manager/jest-preset": "^2.13.0",
"@scm-manager/prettier-config": "^2.10.1",
"@scm-manager/tsconfig": "^2.12.0",
"@types/enzyme": "^3.10.3",

2
scm-ui/ui-plugins/package.json
View File

@@ -21,7 +21,7 @@
"devDependencies": {
"@scm-manager/babel-preset": "^2.12.0",
"@scm-manager/eslint-config": "^2.12.0",
"@scm-manager/jest-preset": "^2.12.7",
"@scm-manager/jest-preset": "^2.13.0",
"@scm-manager/prettier-config": "^2.10.1",
"@scm-manager/tsconfig": "^2.12.0",
"@scm-manager/ui-scripts": "^2.26.2-SNAPSHOT",

25
scm-ui/ui-scripts/package.json
View File

@@ -10,22 +10,21 @@
"ui-scripts": "./bin/ui-scripts.js"
},
"dependencies": {
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.0",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"mini-css-extract-plugin": "^1.6.2",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
"babel-loader": "^8.2.3",
"css-loader": "^6.5.0",
"file-loader": "^6.2.0",
"mini-css-extract-plugin": "^2.4.3",
"mustache": "^3.1.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"react-refresh": "^0.10.0",
"sass": "^1.26.3",
"sass-loader": "^8.0.0",
"sass": "^1.43.4",
"sass-loader": "^12.3.0",
"script-loader": "^0.7.2",
"style-loader": "^1.0.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1",
"worker-plugin": "^3.2.0"
"style-loader": "^3.3.1",
"webpack": "^5.60.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.4.0"
},
"devDependencies": {
"@scm-manager/eslint-config": "^2.12.0",

4
scm-ui/ui-scripts/src/commands/serve.js
View File

@@ -29,9 +29,9 @@ const webpackConfig = require("../webpack.config");
module.exports = () => {
const compiler = Webpack(webpackConfig);
const devServerConfig = webpackConfig[0].devServer;
const server = new WebpackDevServer(compiler, devServerConfig);
const server = new WebpackDevServer(devServerConfig, compiler);
server.listen(devServerConfig.port, "127.0.0.1", () => {
server.startCallback(() => {
console.log(`Starting server on http://localhost:${devServerConfig.port}`);
});

85
scm-ui/ui-scripts/src/webpack.config.js
View File

@@ -25,7 +25,6 @@ const path = require("path");
const fs = require("fs");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const WorkerPlugin = require("worker-plugin");
const createIndexMiddleware = require("./middleware/IndexMiddleware");
const createContextPathMiddleware = require("./middleware/ContextPathMiddleware");
@@ -34,7 +33,7 @@ const isDevelopment = process.env.NODE_ENV === "development";
const root = path.resolve(process.cwd(), "scm-ui");
const babelPlugins = [];
const webpackPlugins = [new WorkerPlugin()];
const webpackPlugins = [];
let mode = "production";
@@ -56,29 +55,26 @@ const themes = fs
console.log(`build ${mode} bundles`);
const base = {
mode,
context: root,
target: "web",
resolveLoader: {
modules: [path.join(__dirname, "..", "node_modules"), "node_modules"],
extensions: [".js", ".json"],
mainFields: ["loader", "main"]
}
};
module.exports = [
{
mode,
stats: "minimal",
context: root,
...base,
entry: {
webapp: [path.resolve(__dirname, "webpack-public-path.js"), "./ui-webapp/src/index.tsx"]
},
devtool: "cheap-module-eval-source-map",
target: "web",
node: {
fs: "empty",
net: "empty",
tls: "empty"
},
devtool: "eval-cheap-module-source-map",
module: {
rules: [
{
parser: {
system: false,
systemjs: false
}
},
{
test: /\.(js|ts|jsx|tsx)$/i,
exclude: /node_modules/,
@@ -119,7 +115,12 @@ module.exports = [
]
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx", ".css", ".scss", ".json"]
extensions: [".ts", ".tsx", ".js", ".jsx", ".css", ".scss", ".json"],
fallback: {
fs: false,
net: false,
tls: false
}
},
output: {
path: path.join(root, "build", "webapp", "assets"),
@@ -127,16 +128,28 @@ module.exports = [
chunkFilename: "[name].bundle.js"
},
devServer: {
contentBase: path.join(root, "ui-webapp", "public"),
compress: false,
static: [
{
directory: path.join(root, "ui-webapp", "public")
}
],
client: {
overlay: {
errors: true,
warnings: false
}
},
historyApiFallback: true,
overlay: true,
port: 3000,
hot: true,
before: app => {
devMiddleware: {
index: false,
publicPath: "/assets/"
},
onBeforeSetupMiddleware: ({ app }) => {
app.use(createContextPathMiddleware("/scm"));
},
after: app => {
onAfterSetupMiddleware: ({ app }) => {
const templatePath = path.join(root, "ui-webapp", "public", "index.mustache");
const stage = process.env.NODE_ENV || "DEVELOPMENT";
const renderParams = {
@@ -144,19 +157,18 @@ module.exports = [
scmStage: stage.toUpperCase()
};
app.use(createIndexMiddleware(templatePath, renderParams));
},
publicPath: "/assets/"
}
},
optimization: {
runtimeChunk: "single",
namedChunks: true,
splitChunks: {
chunks: "all",
chunks: "initial",
cacheGroups: {
vendors: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
// chunks: chunk => chunk.name !== "polyfill"
priority: -10,
filename: "vendors~webapp.bundle.js",
reuseExistingChunk: true
},
default: {
minChunks: 2,
@@ -169,8 +181,7 @@ module.exports = [
plugins: webpackPlugins
},
{
mode,
context: root,
...base,
entry: themes,
module: {
rules: [
@@ -183,10 +194,6 @@ module.exports = [
"css-loader",
"sass-loader"
]
},
{
test: /\.(png|svg|jpg|gif|woff2?|eot|ttf)$/,
use: ["file-loader"]
}
]
},
@@ -197,6 +204,7 @@ module.exports = [
})
],
optimization: {
// TODO only on production?
minimizer: [new OptimizeCSSAssetsPlugin({})]
},
output: {
@@ -205,8 +213,7 @@ module.exports = [
}
},
{
mode,
context: path.resolve(root),
...base,
entry: {
polyfills: "./ui-polyfill/src/index.js"
},

22
scm-ui/ui-styles/package.json
View File

@@ -6,7 +6,7 @@
"license": "MIT",
"private": true,
"scripts": {
"serve": "webpack-dev-server"
"serve": "webpack serve"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.11.2",
@@ -16,17 +16,17 @@
"react-diff-view": "^2.4.1"
},
"devDependencies": {
"@scm-manager/eslint-config": "^2.12.0",
"@scm-manager/prettier-config": "^2.10.1",
"css-loader": "^3.2.0",
"html-webpack-plugin": "4",
"prettier": "^2.1.2",
"@scm-manager/eslint-config": "^2.13.0",
"@scm-manager/prettier-config": "^2.11.1",
"css-loader": "^6.5.0",
"html-webpack-plugin": "^5.5.0",
"raw-loader": "^4.0.2",
"sass": "^1.43.2",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"webpack": "^4.41.5",
"webpack-dev-server": "^3.10.1"
"sass": "^1.43.4",
"sass-loader": "^12.3.0",
"style-loader": "^3.3.1",
"webpack": "^5.60.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.4.0"
},
"prettier": "@scm-manager/prettier-config"
}

25
scm-ui/ui-styles/webpack.config.js
View File

@@ -51,8 +51,9 @@ plugins.push(
);
module.exports = {
mode: "development",
entry: themes,
devtool: "cheap-module-eval-source-map",
devtool: "eval-cheap-module-source-map",
target: "web",
module: {
rules: [
@@ -68,21 +69,27 @@ module.exports = {
],
},
{
test: /\.(png|svg|jpg|gif|woff2?|eot|ttf)$/,
use: ["file-loader"],
},
],
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
}
]
},
output: {
filename: "theme-[name].bundle.js",
},
plugins,
devServer: {
contentBase: [path.join(__dirname, "public"), path.join(__dirname, "..", "ui-webapp", "public")],
contentBasePublicPath: ["/", "/ui-webapp"],
compress: false,
overlay: true,
static: [{
directory: path.join(__dirname, "public"),
publicPath: "/",
}, {
directory: path.join(__dirname, "..", "ui-webapp", "public"),
publicPath: "/ui-webapp",
}],
port: 5000,
client: {
overlay: true,
},
hot: true,
},
};

2
scm-ui/ui-webapp/package.json
View File

@@ -28,7 +28,7 @@
"test": "jest"
},
"devDependencies": {
"@scm-manager/jest-preset": "^2.12.7",
"@scm-manager/jest-preset": "^2.13.0",
"@scm-manager/ui-tests": "^2.26.2-SNAPSHOT",
"@types/classnames": "^2.2.9",
"@types/enzyme": "^3.10.3",

5
scm-webapp/src/main/java/sonia/scm/ProxyPushStateDispatcher.java
View File

@@ -21,7 +21,7 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
package sonia.scm;
import com.google.common.annotations.VisibleForTesting;
@@ -98,7 +98,8 @@ public final class ProxyPushStateDispatcher implements PushStateDispatcher {
response.setStatus(responseCode);
copyResponseHeaders(response, connection);
if (connection.getContentLength() > 0) {
int contentLength = connection.getContentLength();
if (contentLength > 0 || contentLength == -1) {
copyResponseBody(response, connection);
}
}

2
settings.gradle
View File

@@ -29,7 +29,7 @@ rootProject.name = 'scm'
buildscript {
repositories {
jcenter()
mavenCentral()
gradlePluginPortal()
}
dependencies {

2382
yarn.lock
View File

File diff suppressed because it is too large Load Diff