Fixathon: Web app dependency updates part 1 (#29036)
* Ensure all packages remove a node_modules in their folder when cleaning * Upgrade typescript to 5.6.3 and move to root package.json Note that this currently fails to build the types package due to @types/node which I'm going to try to remove * Update @types/node to 20.11 to match .nvmrc * Upgrade zen-observable to 0.10.0 It looks like localforage-observable uses its own version of zen-observable because it hasn't been updated in years. This seems like something we probably should remove. * Update yargs to 17.7.2 * Update webpack-dev-server to 5.1.0 * Remove webpack-bundle-analyzer since we haven't used it in years * Update webpack to 5.95.0 * Update web-vitals to 4.2.4 * Update turndown to 7.2.0 * Update tinycolor2 to 1.6.0 * Update timezones.json to 1.7.0 * Update stylelint to 16.10.0, stylelint-config-recommended-scss to 14.1.0, and stylelint-scss to 6.8.1 * Update webpack-cli to 5.1.4 * Update style-loader to 4.0.0 * Change all Webpack scripts to be ES modules * Update strip-ansi to 7.1.0 This is a build script dependency * Update chalk to 5.3.0 This is a build script dependency * Update concurrently to 9.0.1 This is a build script dependency * Update smooth-scroll-into-view-if-needed to 2.0.2 * MM-48205 Update serialize-error to 11.0.3 We didn't update this before because it's an ES module which caused Jest to complain. We can fix that by making Jest transform the it * Update semver to 7.6.3 * Update types for semver, tinycolor2, turndown, and webpack * Fix type issues: change Props to a type * Fix type issues: invalid HTML attributes * Remove unneeded option from Webpack config
Этот коммит содержится в:
Harrison Healey
коммит произвёл
GitHub
GitHub
родитель
2117a4ed30
Коммит
4136343476
237
webapp/scripts/runner.mjs
Обычный файл
237
webapp/scripts/runner.mjs
Обычный файл
@@ -0,0 +1,237 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import {Writable} from 'node:stream';
|
||||
|
||||
import blessed from 'blessed';
|
||||
import stripAnsi from 'strip-ansi';
|
||||
|
||||
class Runner {
|
||||
commands;
|
||||
filter = '';
|
||||
ui;
|
||||
|
||||
scrollLocked = true;
|
||||
|
||||
buffer = [];
|
||||
partialBuffer = '';
|
||||
|
||||
outputStream;
|
||||
|
||||
closeListeners = new Set();
|
||||
|
||||
constructor(commands) {
|
||||
this.commands = commands;
|
||||
this.outputStream = new Writable({
|
||||
write: (chunk, encoding, callback) => this.writeToStream(chunk, encoding, callback),
|
||||
});
|
||||
|
||||
this.makeUi(commands.map((command) => command.name), this.onFilter);
|
||||
this.registerHotkeys();
|
||||
}
|
||||
|
||||
// Initialization
|
||||
|
||||
makeUi(commandNames) {
|
||||
// Set up screen and output panes
|
||||
const screen = blessed.screen({
|
||||
smartCSR: true,
|
||||
dockBorders: true,
|
||||
});
|
||||
|
||||
const output = blessed.box({
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%-3',
|
||||
content: 'THE END IS NEVER '.repeat(1000),
|
||||
tags: true,
|
||||
alwaysScroll: true,
|
||||
scrollable: true,
|
||||
scrollbar: {
|
||||
ch: '#',
|
||||
style: {},
|
||||
track: {
|
||||
ch: '|',
|
||||
},
|
||||
},
|
||||
style: {},
|
||||
});
|
||||
|
||||
screen.append(output);
|
||||
|
||||
// Set up the menu bar
|
||||
const menu = blessed.listbar({
|
||||
top: '100%-3',
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: 3,
|
||||
border: {
|
||||
type: 'line',
|
||||
},
|
||||
style: {
|
||||
item: {
|
||||
bg: 'red',
|
||||
hover: {
|
||||
bg: 'green',
|
||||
},
|
||||
},
|
||||
selected: {
|
||||
bg: 'blue',
|
||||
},
|
||||
},
|
||||
tags: true,
|
||||
autoCommandKeys: true,
|
||||
mouse: true,
|
||||
});
|
||||
|
||||
menu.add('All', () => this.onFilter(''));
|
||||
for (const name of commandNames) {
|
||||
menu.add(name, () => this.onFilter(name));
|
||||
}
|
||||
|
||||
screen.append(menu);
|
||||
|
||||
this.ui = {
|
||||
menu,
|
||||
output,
|
||||
screen,
|
||||
};
|
||||
}
|
||||
|
||||
registerHotkeys() {
|
||||
this.ui.screen.key(['escape', 'q', 'C-c'], () => {
|
||||
for (const listener of this.closeListeners) {
|
||||
listener();
|
||||
}
|
||||
});
|
||||
|
||||
this.ui.screen.key(['up', 'down'], (char, key) => {
|
||||
this.scrollDelta(key.name === 'up' ? -1 : 1);
|
||||
});
|
||||
this.ui.screen.on('wheelup', () => {
|
||||
this.scrollDelta(-3);
|
||||
});
|
||||
this.ui.screen.on('wheeldown', () => {
|
||||
this.scrollDelta(3);
|
||||
});
|
||||
this.ui.screen.key('end', () => {
|
||||
this.scrollToBottom();
|
||||
});
|
||||
}
|
||||
|
||||
// Rendering and internal logic
|
||||
|
||||
renderUi() {
|
||||
const filtered = this.buffer.filter((line) => this.filter === '' || line.tag === this.filter);
|
||||
|
||||
this.ui.output.setContent(filtered.map((line) => this.formatLine(line)).join('\n'));
|
||||
|
||||
if (this.scrollLocked) {
|
||||
this.ui.output.scrollbar.style.inverse = true;
|
||||
this.ui.output.setScrollPerc(100);
|
||||
} else {
|
||||
this.ui.output.scrollbar.style.inverse = false;
|
||||
}
|
||||
|
||||
this.ui.screen.render();
|
||||
}
|
||||
|
||||
formatLine(line) {
|
||||
const color = this.commands.find((command) => command.name === line.tag)?.prefixColor;
|
||||
|
||||
return color ? `{bold}{${color}-fg}[${line.tag}]{/} ${line.text}` : `[${line.tag}] ${line.text}`;
|
||||
}
|
||||
|
||||
onFilter(newFilter) {
|
||||
this.filter = newFilter;
|
||||
|
||||
this.scrollLocked = true;
|
||||
this.renderUi();
|
||||
}
|
||||
|
||||
scrollDelta(delta) {
|
||||
this.ui.output.scroll(delta);
|
||||
|
||||
if (this.ui.output.getScrollPerc() >= 100 || this.ui.output.getScrollHeight() <= this.ui.output.height) {
|
||||
this.scrollLocked = true;
|
||||
} else {
|
||||
this.scrollLocked = false;
|
||||
}
|
||||
|
||||
this.renderUi();
|
||||
}
|
||||
|
||||
scrollToBottom() {
|
||||
this.scrollLocked = true;
|
||||
this.renderUi();
|
||||
}
|
||||
|
||||
// Terminal output handling
|
||||
|
||||
getOutputStream() {
|
||||
return this.outputStream;
|
||||
}
|
||||
|
||||
writeToStream(chunk, encoding, callback) {
|
||||
const str = String(chunk);
|
||||
|
||||
if (str.includes('\n')) {
|
||||
const parts = str.split('\n');
|
||||
|
||||
// Add completed lines to buffer
|
||||
this.appendToBuffer(this.partialBuffer + parts[0]);
|
||||
|
||||
for (let i = 1; i < parts.length - 1; i++) {
|
||||
this.appendToBuffer(parts[i]);
|
||||
}
|
||||
|
||||
// Track partial line
|
||||
this.partialBuffer = parts[parts.length - 1];
|
||||
} else {
|
||||
// Track partial line
|
||||
this.partialBuffer += str;
|
||||
}
|
||||
|
||||
this.renderUi();
|
||||
|
||||
callback();
|
||||
}
|
||||
|
||||
appendToBuffer(line) {
|
||||
// This regex is more complicated than expected because it
|
||||
const match = (/^\[([^\]]*)\]\s*(.*)$/).exec(stripAnsi(line));
|
||||
|
||||
if (match) {
|
||||
this.buffer.push({tag: match[1], text: match[2]});
|
||||
} else {
|
||||
this.buffer.push({tag: '', text: 'Line not recognized correctly: ' + line});
|
||||
}
|
||||
|
||||
// Keep the buffer from using too much memory by removing the oldest chunk of it every time it goes over 5000 lines
|
||||
const bufferCapacity = 5000;
|
||||
const capacityReduction = 1000;
|
||||
|
||||
if (this.buffer.length > bufferCapacity) {
|
||||
this.buffer = this.buffer.slice(this.buffer.length - capacityReduction);
|
||||
}
|
||||
}
|
||||
|
||||
// Event handlers
|
||||
|
||||
addCloseListener(listener) {
|
||||
this.closeListeners.add(listener);
|
||||
}
|
||||
|
||||
removeCloseListener(listener) {
|
||||
this.closeListeners.remove(listener);
|
||||
}
|
||||
}
|
||||
|
||||
export function makeRunner(commands) {
|
||||
const runner = new Runner(commands);
|
||||
|
||||
runner.renderUi();
|
||||
|
||||
return runner;
|
||||
}
|
||||
Ссылка в новой задаче
Block a user