mirror of
https://github.com/esphome/esp-web-tools.git
synced 2025-07-22 19:26:37 +00:00
Performance improvements/fixes (#592)
This commit is contained in:
parent
763680a43a
commit
bcaf930531
@ -21,7 +21,7 @@ export const connect = async (button: InstallButton) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await port.open({ baudRate: 115200 });
|
await port.open({ baudRate: 115200, bufferSize: 8192 });
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
alert(err.message);
|
alert(err.message);
|
||||||
return;
|
return;
|
||||||
|
@ -923,13 +923,13 @@ export class EwtInstallDialog extends LitElement {
|
|||||||
if (state.state === FlashStateType.FINISHED) {
|
if (state.state === FlashStateType.FINISHED) {
|
||||||
sleep(100)
|
sleep(100)
|
||||||
// Flashing closes the port
|
// Flashing closes the port
|
||||||
.then(() => this.port.open({ baudRate: 115200 }))
|
.then(() => this.port.open({ baudRate: 115200, bufferSize: 8192 }))
|
||||||
.then(() => this._initialize(true))
|
.then(() => this._initialize(true))
|
||||||
.then(() => this.requestUpdate());
|
.then(() => this.requestUpdate());
|
||||||
} else if (state.state === FlashStateType.ERROR) {
|
} else if (state.state === FlashStateType.ERROR) {
|
||||||
sleep(100)
|
sleep(100)
|
||||||
// Flashing closes the port
|
// Flashing closes the port
|
||||||
.then(() => this.port.open({ baudRate: 115200 }));
|
.then(() => this.port.open({ baudRate: 115200, bufferSize: 8192 }));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
this.port,
|
this.port,
|
||||||
|
@ -6,6 +6,7 @@ interface ConsoleState {
|
|||||||
foregroundColor: string | null;
|
foregroundColor: string | null;
|
||||||
backgroundColor: string | null;
|
backgroundColor: string | null;
|
||||||
carriageReturn: boolean;
|
carriageReturn: boolean;
|
||||||
|
lines: string[];
|
||||||
secret: boolean;
|
secret: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -18,6 +19,7 @@ export class ColoredConsole {
|
|||||||
foregroundColor: null,
|
foregroundColor: null,
|
||||||
backgroundColor: null,
|
backgroundColor: null,
|
||||||
carriageReturn: false,
|
carriageReturn: false,
|
||||||
|
lines: [],
|
||||||
secret: false,
|
secret: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -27,26 +29,13 @@ export class ColoredConsole {
|
|||||||
return this.targetElement.innerText;
|
return this.targetElement.innerText;
|
||||||
}
|
}
|
||||||
|
|
||||||
addLine(line: string) {
|
processLine(line: string): Element {
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
const re = /(?:\033|\\033)(?:\[(.*?)[@-~]|\].*?(?:\007|\033\\))/g;
|
const re = /(?:\033|\\033)(?:\[(.*?)[@-~]|\].*?(?:\007|\033\\))/g;
|
||||||
let i = 0;
|
let i = 0;
|
||||||
|
|
||||||
if (this.state.carriageReturn) {
|
|
||||||
if (line !== "\n") {
|
|
||||||
// don't remove if \r\n
|
|
||||||
this.targetElement.removeChild(this.targetElement.lastChild!);
|
|
||||||
}
|
|
||||||
this.state.carriageReturn = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (line.includes("\r")) {
|
|
||||||
this.state.carriageReturn = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
const lineSpan = document.createElement("span");
|
const lineSpan = document.createElement("span");
|
||||||
lineSpan.classList.add("line");
|
lineSpan.classList.add("line");
|
||||||
this.targetElement.appendChild(lineSpan);
|
|
||||||
|
|
||||||
const addSpan = (content: string) => {
|
const addSpan = (content: string) => {
|
||||||
if (content === "") return;
|
if (content === "") return;
|
||||||
@ -179,17 +168,52 @@ export class ColoredConsole {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
addSpan(line.substring(i));
|
||||||
|
return lineSpan;
|
||||||
|
}
|
||||||
|
|
||||||
|
processLines() {
|
||||||
const atBottom =
|
const atBottom =
|
||||||
this.targetElement.scrollTop >
|
this.targetElement.scrollTop >
|
||||||
this.targetElement.scrollHeight - this.targetElement.offsetHeight - 50;
|
this.targetElement.scrollHeight - this.targetElement.offsetHeight - 50;
|
||||||
|
const prevCarriageReturn = this.state.carriageReturn;
|
||||||
|
const fragment = document.createDocumentFragment();
|
||||||
|
|
||||||
addSpan(line.substring(i));
|
if (this.state.lines.length == 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const line of this.state.lines) {
|
||||||
|
if (this.state.carriageReturn && line !== "\n") {
|
||||||
|
if (fragment.childElementCount) {
|
||||||
|
fragment.removeChild(fragment.lastChild!);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
fragment.appendChild(this.processLine(line));
|
||||||
|
this.state.carriageReturn = line.includes("\r");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (prevCarriageReturn && this.state.lines[0] !== "\n") {
|
||||||
|
this.targetElement.replaceChild(fragment, this.targetElement.lastChild!);
|
||||||
|
} else {
|
||||||
|
this.targetElement.appendChild(fragment);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.state.lines = [];
|
||||||
|
|
||||||
// Keep scroll at bottom
|
// Keep scroll at bottom
|
||||||
if (atBottom) {
|
if (atBottom) {
|
||||||
this.targetElement.scrollTop = this.targetElement.scrollHeight;
|
this.targetElement.scrollTop = this.targetElement.scrollHeight;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
addLine(line: string) {
|
||||||
|
// Processing of lines is deferred for performance reasons
|
||||||
|
if (this.state.lines.length == 0) {
|
||||||
|
setTimeout(() => this.processLines(), 0);
|
||||||
|
}
|
||||||
|
this.state.lines.push(line);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const coloredConsoleStyles = `
|
export const coloredConsoleStyles = `
|
||||||
|
@ -8,7 +8,7 @@ export class LineBreakTransformer implements Transformer<string, string> {
|
|||||||
// Append new chunks to existing chunks.
|
// Append new chunks to existing chunks.
|
||||||
this.chunks += chunk;
|
this.chunks += chunk;
|
||||||
// For each line breaks in chunks, send the parsed lines out.
|
// For each line breaks in chunks, send the parsed lines out.
|
||||||
const lines = this.chunks.split("\r\n");
|
const lines = this.chunks.split(/\r?\n/);
|
||||||
this.chunks = lines.pop()!;
|
this.chunks = lines.pop()!;
|
||||||
lines.forEach((line) => controller.enqueue(line + "\r\n"));
|
lines.forEach((line) => controller.enqueue(line + "\r\n"));
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user