Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-08 06:25:45 +01:00
Code Issues Packages Projects Releases Activity

Fix freezing browser if syntax highlighting large files (#2010)

Browse Source 
We unified syntax highlighting and extracted it into a low level module. Syntax highlighting from now on takes place in a web worker, so that the user interface stays responsive. The web worker stops automatically if the number of nodes which should be highlighted exceeds the defined limit we believe the browser can handle.

Co-authored-by: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Co-authored-by: Konstantin Schaper <konstantin.schaper@cloudogu.com>
This commit is contained in:
Matthias Thieroff
2022-04-25 16:34:40 +02:00
committed by GitHub
parent 0e930b8671
commit a0737a2c90
82 changed files with 24217 additions and 24879 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,47 +26,47 @@ const path = require("path");
const fs = require("fs");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const RemoveThemesPlugin = require("./RemoveThemesPlugin");
const WorkerPlugin = require("worker-plugin");
const ReactDOM = require("react-dom");
const root = path.resolve("..");
const themedir = path.join(root, "ui-styles", "src");
ReactDOM.createPortal = node => node;
ReactDOM.createPortal = (node) => node;
const themes = fs
.readdirSync(themedir)
.map(filename => path.parse(filename))
.filter(p => p.ext === ".scss")
.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"
builder: "webpack5",
},
typescript: { reactDocgen: false },
stories: ["../src/**/*.stories.tsx"],
addons: ["storybook-addon-i18next", "storybook-addon-themes"],
webpackFinal: async config => {
framework: "@storybook/react",
addons: ["storybook-addon-i18next", "storybook-addon-themes", "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
webpackFinal: async (config) => {
// add our themes to webpack entry points
config.entry = {
main: config.entry,
...themes
...themes,
};
// create separate css files for our themes
config.plugins.push(
new MiniCssExtractPlugin({
filename: "[name].css",
ignoreOrder: false
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 and js files to the iframe,
@@ -75,6 +75,9 @@ module.exports = {
// to filter our themes from the output.
config.plugins.push(new RemoveThemesPlugin());
// force node version of "decode-named-character-reference" instead of browser version which does not work in web worker
config.resolve.alias["decode-named-character-reference"] = require.resolve("decode-named-character-reference");
return config;
}
},
};