tasmota-esp-web-tools 8.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (115) hide show
  1. package/.devcontainer/Dockerfile +16 -0
  2. package/.devcontainer/devcontainer.json +44 -0
  3. package/.github/dependabot.yml +10 -0
  4. package/.github/release-drafter.yml +12 -0
  5. package/.github/workflows/ci.yml +22 -0
  6. package/.github/workflows/npmpublish.yml +22 -0
  7. package/.github/workflows/release-drafter.yml +14 -0
  8. package/.prettierignore +1 -0
  9. package/README.md +68 -0
  10. package/dist/components/ewt-button.d.ts +9 -0
  11. package/dist/components/ewt-button.js +17 -0
  12. package/dist/components/ewt-checkbox.d.ts +9 -0
  13. package/dist/components/ewt-checkbox.js +6 -0
  14. package/dist/components/ewt-circular-progress.d.ts +9 -0
  15. package/dist/components/ewt-circular-progress.js +6 -0
  16. package/dist/components/ewt-console.d.ts +20 -0
  17. package/dist/components/ewt-console.js +141 -0
  18. package/dist/components/ewt-dialog.d.ts +9 -0
  19. package/dist/components/ewt-dialog.js +14 -0
  20. package/dist/components/ewt-formfield.d.ts +9 -0
  21. package/dist/components/ewt-formfield.js +6 -0
  22. package/dist/components/ewt-icon-button.d.ts +9 -0
  23. package/dist/components/ewt-icon-button.js +6 -0
  24. package/dist/components/ewt-list-item.d.ts +9 -0
  25. package/dist/components/ewt-list-item.js +6 -0
  26. package/dist/components/ewt-select.d.ts +9 -0
  27. package/dist/components/ewt-select.js +15 -0
  28. package/dist/components/ewt-textfield.d.ts +9 -0
  29. package/dist/components/ewt-textfield.js +15 -0
  30. package/dist/components/svg.d.ts +3 -0
  31. package/dist/components/svg.js +24 -0
  32. package/dist/connect.d.ts +3 -0
  33. package/dist/connect.js +33 -0
  34. package/dist/const.d.ts +94 -0
  35. package/dist/const.js +1 -0
  36. package/dist/flash.d.ts +4 -0
  37. package/dist/flash.js +191 -0
  38. package/dist/install-button.d.ts +17 -0
  39. package/dist/install-button.js +96 -0
  40. package/dist/install-dialog.d.ts +70 -0
  41. package/dist/install-dialog.js +899 -0
  42. package/dist/no-port-picked/index.d.ts +2 -0
  43. package/dist/no-port-picked/index.js +7 -0
  44. package/dist/no-port-picked/no-port-picked-dialog.d.ts +15 -0
  45. package/dist/no-port-picked/no-port-picked-dialog.js +149 -0
  46. package/dist/pages/ewt-page-message.d.ts +14 -0
  47. package/dist/pages/ewt-page-message.js +34 -0
  48. package/dist/pages/ewt-page-progress.d.ts +14 -0
  49. package/dist/pages/ewt-page-progress.js +39 -0
  50. package/dist/styles.d.ts +1 -0
  51. package/dist/styles.js +32 -0
  52. package/dist/util/chip-family-name.d.ts +3 -0
  53. package/dist/util/chip-family-name.js +17 -0
  54. package/dist/util/console-color.d.ts +19 -0
  55. package/dist/util/console-color.js +265 -0
  56. package/dist/util/file-download.d.ts +2 -0
  57. package/dist/util/file-download.js +15 -0
  58. package/dist/util/fire-event.d.ts +5 -0
  59. package/dist/util/fire-event.js +12 -0
  60. package/dist/util/line-break-transformer.d.ts +5 -0
  61. package/dist/util/line-break-transformer.js +17 -0
  62. package/dist/util/manifest.d.ts +2 -0
  63. package/dist/util/manifest.js +12 -0
  64. package/dist/util/sleep.d.ts +1 -0
  65. package/dist/util/sleep.js +1 -0
  66. package/dist/web/connect-3012e6dd.js +886 -0
  67. package/dist/web/esp32-5f88817f.js +1 -0
  68. package/dist/web/esp32c3-596796ad.js +1 -0
  69. package/dist/web/esp32s2-f7a69530.js +1 -0
  70. package/dist/web/esp32s3-314fbacd.js +1 -0
  71. package/dist/web/esp8266-c68f89af.js +1 -0
  72. package/dist/web/index-f110c132.js +126 -0
  73. package/dist/web/install-button.js +1 -0
  74. package/package.json +36 -0
  75. package/rollup.config.js +28 -0
  76. package/script/build +8 -0
  77. package/script/develop +17 -0
  78. package/script/stubgen.py +161 -0
  79. package/src/components/ewt-button.ts +25 -0
  80. package/src/components/ewt-checkbox.ts +14 -0
  81. package/src/components/ewt-circular-progress.ts +14 -0
  82. package/src/components/ewt-console.ts +163 -0
  83. package/src/components/ewt-dialog.ts +22 -0
  84. package/src/components/ewt-formfield.ts +14 -0
  85. package/src/components/ewt-icon-button.ts +14 -0
  86. package/src/components/ewt-list-item.ts +14 -0
  87. package/src/components/ewt-select.ts +23 -0
  88. package/src/components/ewt-textfield.ts +23 -0
  89. package/src/components/svg.ts +27 -0
  90. package/src/connect.ts +42 -0
  91. package/src/const.ts +101 -0
  92. package/src/flash.ts +240 -0
  93. package/src/install-button.ts +128 -0
  94. package/src/install-dialog.ts +981 -0
  95. package/src/no-port-picked/index.ts +10 -0
  96. package/src/no-port-picked/no-port-picked-dialog.ts +158 -0
  97. package/src/pages/ewt-page-message.ts +39 -0
  98. package/src/pages/ewt-page-progress.ts +44 -0
  99. package/src/styles.ts +34 -0
  100. package/src/util/chip-family-name.ts +28 -0
  101. package/src/util/console-color.ts +283 -0
  102. package/src/util/file-download.ts +17 -0
  103. package/src/util/fire-event.ts +20 -0
  104. package/src/util/line-break-transformer.ts +20 -0
  105. package/src/util/manifest.ts +18 -0
  106. package/src/util/sleep.ts +2 -0
  107. package/static/logos/canairio.png +0 -0
  108. package/static/logos/espeasy.png +0 -0
  109. package/static/logos/esphome.svg +1 -0
  110. package/static/logos/tasmota.svg +1 -0
  111. package/static/logos/wled.png +0 -0
  112. package/static/screenshots/dashboard.png +0 -0
  113. package/static/screenshots/logs.png +0 -0
  114. package/static/social.png +0 -0
  115. package/tsconfig.json +21 -0
@@ -0,0 +1,2 @@
1
+ import "./no-port-picked-dialog";
2
+ export declare const openNoPortPickedDialog: (doTryAgain?: () => void) => Promise<boolean>;
@@ -0,0 +1,7 @@
1
+ import "./no-port-picked-dialog";
2
+ export const openNoPortPickedDialog = async (doTryAgain) => {
3
+ const dialog = document.createElement("ewt-no-port-picked-dialog");
4
+ dialog.doTryAgain = doTryAgain;
5
+ document.body.append(dialog);
6
+ return true;
7
+ };
@@ -0,0 +1,15 @@
1
+ import { LitElement } from "lit";
2
+ import "../components/ewt-dialog";
3
+ import "../components/ewt-button";
4
+ declare class EwtNoPortPickedDialog extends LitElement {
5
+ doTryAgain?: () => void;
6
+ render(): import("lit-html").TemplateResult<1>;
7
+ private _handleClose;
8
+ static styles: import("lit").CSSResult[];
9
+ }
10
+ declare global {
11
+ interface HTMLElementTagNameMap {
12
+ "ewt-no-port-picked-dialog": EwtNoPortPickedDialog;
13
+ }
14
+ }
15
+ export {};
@@ -0,0 +1,149 @@
1
+ import { __decorate } from "tslib";
2
+ import { LitElement, html, css, svg } from "lit";
3
+ import { customElement } from "lit/decorators.js";
4
+ import "../components/ewt-dialog";
5
+ import "../components/ewt-button";
6
+ import { dialogStyles } from "../styles";
7
+ const cloudDownload = svg `
8
+ <svg
9
+ version="1.1"
10
+ id="Capa_1"
11
+ xmlns="http://www.w3.org/2000/svg"
12
+ xmlns:xlink="http://www.w3.org/1999/xlink"
13
+ x="0px"
14
+ y="0px"
15
+ viewBox="0 0 510.322 510.322"
16
+ xml:space="preserve"
17
+ style="width: 28px; vertical-align: middle;"
18
+ >
19
+ <g>
20
+ <path
21
+ style="fill:currentColor;"
22
+ d="M429.064,159.505c0-0.151,0.086-1.057,0.086-1.057c0-75.282-61.261-136.521-136.543-136.521 c-52.244,0-97.867,30.587-120.753,76.339c-11.67-9.081-25.108-15.682-40.273-15.682c-37.166,0-67.387,30.199-67.387,67.387 c0,0,0.453,3.279,0.798,5.824C27.05,168.716,0,203.423,0,244.516c0,25.389,9.901,49.268,27.848,67.171 c17.968,17.99,41.804,27.869,67.193,27.869h130.244v46.83h-54.66l97.694,102.008l95.602-102.008h-54.66v-46.83H419.25 c50.174,0,91.072-40.855,91.072-90.986C510.3,201.827,474.428,164.639,429.064,159.505z M419.207,312.744H309.26v-55.545h-83.975 v55.545H95.019c-18.184,0-35.333-7.075-48.211-19.996c-12.878-12.878-19.953-30.005-19.953-48.189 c0-32.68,23.21-60.808,55.264-66.956l12.511-2.394l-2.092-14.431l-1.488-10.785c0-22.347,18.184-40.51,40.531-40.51 c13.266,0,25.691,6.514,33.305,17.408l15.229,21.873l8.52-25.303c15.013-44.652,56.796-74.656,103.906-74.656 c60.506,0,109.709,49.203,109.709,109.644l-1.337,25.712l15.121,0.302l3.149-0.086c35.419,0,64.216,28.797,64.216,64.216 C483.401,283.969,454.604,312.744,419.207,312.744z"
23
+ />
24
+ </g>
25
+ </svg>
26
+ `;
27
+ let EwtNoPortPickedDialog = class EwtNoPortPickedDialog extends LitElement {
28
+ render() {
29
+ return html `
30
+ <ewt-dialog
31
+ open
32
+ heading="No port selected"
33
+ scrimClickAction
34
+ @closed=${this._handleClose}
35
+ >
36
+ <div>
37
+ If you didn't select a port because you didn't see your device listed,
38
+ try the following steps:
39
+ </div>
40
+ <ol>
41
+ <li>
42
+ Make sure that the device is connected to this computer (the one
43
+ that runs the browser that shows this website)
44
+ </li>
45
+ <li>
46
+ Most devices have a tiny light when it is powered on. If yours has
47
+ one, make sure it is on.
48
+ </li>
49
+ <li>
50
+ Make sure that the USB cable you use can be used for data and is not
51
+ a power-only cable.
52
+ </li>
53
+ <li>
54
+ Make sure you have the right drivers installed. Below are the
55
+ drivers for common chips used in ESP devices:
56
+ <ul>
57
+ <li>
58
+ CP2102 drivers:
59
+ <a
60
+ href="https://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers"
61
+ target="_blank"
62
+ rel="noopener"
63
+ >Windows & Mac</a
64
+ >
65
+ </li>
66
+ <li>
67
+ CH342, CH343, CH9102 drivers:
68
+ <a
69
+ href="https://www.wch.cn/downloads/CH343SER_ZIP.html"
70
+ target="_blank"
71
+ rel="noopener"
72
+ >Windows</a
73
+ >,
74
+ <a
75
+ href="https://www.wch.cn/downloads/CH34XSER_MAC_ZIP.html"
76
+ target="_blank"
77
+ rel="noopener"
78
+ >Mac</a
79
+ >
80
+ <br />
81
+ (download via blue button with ${cloudDownload} icon)
82
+ </li>
83
+ <li>
84
+ CH340, CH341 drivers:
85
+ <a
86
+ href="https://www.wch.cn/downloads/CH341SER_ZIP.html"
87
+ target="_blank"
88
+ rel="noopener"
89
+ >Windows</a
90
+ >,
91
+ <a
92
+ href="https://www.wch.cn/downloads/CH341SER_MAC_ZIP.html"
93
+ target="_blank"
94
+ rel="noopener"
95
+ >Mac</a
96
+ >
97
+ <br />
98
+ (download via blue button with ${cloudDownload} icon)
99
+ </li>
100
+ </ul>
101
+ </li>
102
+ </ol>
103
+ ${this.doTryAgain
104
+ ? html `
105
+ <ewt-button
106
+ slot="primaryAction"
107
+ dialogAction="close"
108
+ label="Try Again"
109
+ @click=${this.doTryAgain}
110
+ ></ewt-button>
111
+
112
+ <ewt-button
113
+ no-attention
114
+ slot="secondaryAction"
115
+ dialogAction="close"
116
+ label="Cancel"
117
+ ></ewt-button>
118
+ `
119
+ : html `
120
+ <ewt-button
121
+ slot="primaryAction"
122
+ dialogAction="close"
123
+ label="Close"
124
+ ></ewt-button>
125
+ `}
126
+ </ewt-dialog>
127
+ `;
128
+ }
129
+ async _handleClose() {
130
+ this.parentNode.removeChild(this);
131
+ }
132
+ };
133
+ EwtNoPortPickedDialog.styles = [
134
+ dialogStyles,
135
+ css `
136
+ li + li,
137
+ li > ul {
138
+ margin-top: 8px;
139
+ }
140
+ ul,
141
+ ol {
142
+ margin-bottom: 0;
143
+ padding-left: 1.5em;
144
+ }
145
+ `,
146
+ ];
147
+ EwtNoPortPickedDialog = __decorate([
148
+ customElement("ewt-no-port-picked-dialog")
149
+ ], EwtNoPortPickedDialog);
@@ -0,0 +1,14 @@
1
+ import { LitElement, TemplateResult } from "lit";
2
+ import "../components/ewt-circular-progress";
3
+ declare class EwtPageMessage extends LitElement {
4
+ icon: string;
5
+ label: string | TemplateResult;
6
+ render(): TemplateResult<1>;
7
+ static styles: import("lit").CSSResult;
8
+ }
9
+ declare global {
10
+ interface HTMLElementTagNameMap {
11
+ "ewt-page-message": EwtPageMessage;
12
+ }
13
+ }
14
+ export {};
@@ -0,0 +1,34 @@
1
+ import { __decorate } from "tslib";
2
+ import { LitElement, html, css } from "lit";
3
+ import { property } from "lit/decorators.js";
4
+ import "../components/ewt-circular-progress";
5
+ class EwtPageMessage extends LitElement {
6
+ render() {
7
+ return html `
8
+ <div class="icon">${this.icon}</div>
9
+ ${this.label}
10
+ `;
11
+ }
12
+ }
13
+ EwtPageMessage.styles = css `
14
+ :host {
15
+ display: flex;
16
+ flex-direction: column;
17
+ text-align: center;
18
+ }
19
+ .icon {
20
+ font-size: 50px;
21
+ line-height: 80px;
22
+ color: black;
23
+ }
24
+ ewt-circular-progress {
25
+ margin-bottom: 16px;
26
+ }
27
+ `;
28
+ __decorate([
29
+ property()
30
+ ], EwtPageMessage.prototype, "icon", void 0);
31
+ __decorate([
32
+ property()
33
+ ], EwtPageMessage.prototype, "label", void 0);
34
+ customElements.define("ewt-page-message", EwtPageMessage);
@@ -0,0 +1,14 @@
1
+ import { LitElement, TemplateResult } from "lit";
2
+ import "../components/ewt-circular-progress";
3
+ declare class EwtPageProgress extends LitElement {
4
+ label: string | TemplateResult;
5
+ progress: number | undefined;
6
+ render(): TemplateResult<1>;
7
+ static styles: import("lit").CSSResult;
8
+ }
9
+ declare global {
10
+ interface HTMLElementTagNameMap {
11
+ "ewt-page-progress": EwtPageProgress;
12
+ }
13
+ }
14
+ export {};
@@ -0,0 +1,39 @@
1
+ import { __decorate } from "tslib";
2
+ import { LitElement, html, css } from "lit";
3
+ import { property } from "lit/decorators.js";
4
+ import "../components/ewt-circular-progress";
5
+ class EwtPageProgress extends LitElement {
6
+ render() {
7
+ return html `
8
+ <div>
9
+ <ewt-circular-progress
10
+ active
11
+ ?indeterminate=${this.progress === undefined}
12
+ .progress=${this.progress !== undefined
13
+ ? this.progress / 100
14
+ : undefined}
15
+ density="8"
16
+ ></ewt-circular-progress>
17
+ ${this.progress !== undefined ? html `<div>${this.progress}%</div>` : ""}
18
+ </div>
19
+ ${this.label}
20
+ `;
21
+ }
22
+ }
23
+ EwtPageProgress.styles = css `
24
+ :host {
25
+ display: flex;
26
+ flex-direction: column;
27
+ text-align: center;
28
+ }
29
+ ewt-circular-progress {
30
+ margin-bottom: 16px;
31
+ }
32
+ `;
33
+ __decorate([
34
+ property()
35
+ ], EwtPageProgress.prototype, "label", void 0);
36
+ __decorate([
37
+ property()
38
+ ], EwtPageProgress.prototype, "progress", void 0);
39
+ customElements.define("ewt-page-progress", EwtPageProgress);
@@ -0,0 +1 @@
1
+ export declare const dialogStyles: import("lit").CSSResult;
package/dist/styles.js ADDED
@@ -0,0 +1,32 @@
1
+ import { css } from "lit";
2
+ // We set font-size to 16px and all the mdc typography styles
3
+ // because it defaults to rem, which means that the font-size
4
+ // of the host website would influence the ESP Web Tools dialog.
5
+ export const dialogStyles = css `
6
+ :host {
7
+ --mdc-theme-primary: var(--improv-primary-color, #03a9f4);
8
+ --mdc-theme-on-primary: var(--improv-on-primary-color, #fff);
9
+ --improv-danger-color: #db4437;
10
+ --improv-text-color: rgba(0, 0, 0, 0.6);
11
+ --mdc-theme-text-primary-on-background: var(--improv-text-color);
12
+ --mdc-dialog-content-ink-color: var(--improv-text-color);
13
+ text-align: left;
14
+ font-size: 16px;
15
+ --mdc-typography-headline6-font-size: 1.25em;
16
+ --mdc-typography-headline6-line-height: 2em;
17
+ --mdc-typography-body1-font-size: 1em;
18
+ --mdc-typography-body1-line-height: 1.5em;
19
+ --mdc-typography-button-font-size: 0.875em;
20
+ --mdc-typography-button-line-height: 2.25em;
21
+ --mdc-typography-subtitle1-font-size: 1em;
22
+ --mdc-typography-subtitle1-line-height: 1.75em;
23
+ }
24
+
25
+ a {
26
+ color: var(--improv-primary-color, #03a9f4);
27
+ }
28
+
29
+ a.button {
30
+ text-decoration: none;
31
+ }
32
+ `;
@@ -0,0 +1,3 @@
1
+ import { ESPLoader } from "tasmota-webserial-esptool";
2
+ import type { BaseFlashState } from "../const";
3
+ export declare const getChipFamilyName: (esploader: ESPLoader) => NonNullable<BaseFlashState["chipFamily"]>;
@@ -0,0 +1,17 @@
1
+ import { CHIP_FAMILY_ESP32, CHIP_FAMILY_ESP32S2, CHIP_FAMILY_ESP32S3, CHIP_FAMILY_ESP8266, CHIP_FAMILY_ESP32C3, } from "tasmota-webserial-esptool";
2
+ export const getChipFamilyName = (esploader) => {
3
+ switch (esploader.chipFamily) {
4
+ case CHIP_FAMILY_ESP32:
5
+ return "ESP32";
6
+ case CHIP_FAMILY_ESP8266:
7
+ return "ESP8266";
8
+ case CHIP_FAMILY_ESP32S2:
9
+ return "ESP32-S2";
10
+ case CHIP_FAMILY_ESP32S3:
11
+ return "ESP32-S3";
12
+ case CHIP_FAMILY_ESP32C3:
13
+ return "ESP32-C3";
14
+ default:
15
+ return "Unknown Chip";
16
+ }
17
+ };
@@ -0,0 +1,19 @@
1
+ interface ConsoleState {
2
+ bold: boolean;
3
+ italic: boolean;
4
+ underline: boolean;
5
+ strikethrough: boolean;
6
+ foregroundColor: string | null;
7
+ backgroundColor: string | null;
8
+ carriageReturn: boolean;
9
+ secret: boolean;
10
+ }
11
+ export declare class ColoredConsole {
12
+ targetElement: HTMLElement;
13
+ state: ConsoleState;
14
+ constructor(targetElement: HTMLElement);
15
+ logs(): string;
16
+ addLine(line: string): void;
17
+ }
18
+ export declare const coloredConsoleStyles = "\n .log {\n flex: 1;\n background-color: #1c1c1c;\n font-family: \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier,\n monospace;\n font-size: 12px;\n padding: 16px;\n overflow: auto;\n line-height: 1.45;\n border-radius: 3px;\n white-space: pre-wrap;\n overflow-wrap: break-word;\n color: #ddd;\n }\n\n .log-bold {\n font-weight: bold;\n }\n .log-italic {\n font-style: italic;\n }\n .log-underline {\n text-decoration: underline;\n }\n .log-strikethrough {\n text-decoration: line-through;\n }\n .log-underline.log-strikethrough {\n text-decoration: underline line-through;\n }\n .log-secret {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n .log-secret-redacted {\n opacity: 0;\n width: 1px;\n font-size: 1px;\n }\n .log-fg-black {\n color: rgb(128, 128, 128);\n }\n .log-fg-red {\n color: rgb(255, 0, 0);\n }\n .log-fg-green {\n color: rgb(0, 255, 0);\n }\n .log-fg-yellow {\n color: rgb(255, 255, 0);\n }\n .log-fg-blue {\n color: rgb(0, 0, 255);\n }\n .log-fg-magenta {\n color: rgb(255, 0, 255);\n }\n .log-fg-cyan {\n color: rgb(0, 255, 255);\n }\n .log-fg-white {\n color: rgb(187, 187, 187);\n }\n .log-bg-black {\n background-color: rgb(0, 0, 0);\n }\n .log-bg-red {\n background-color: rgb(255, 0, 0);\n }\n .log-bg-green {\n background-color: rgb(0, 255, 0);\n }\n .log-bg-yellow {\n background-color: rgb(255, 255, 0);\n }\n .log-bg-blue {\n background-color: rgb(0, 0, 255);\n }\n .log-bg-magenta {\n background-color: rgb(255, 0, 255);\n }\n .log-bg-cyan {\n background-color: rgb(0, 255, 255);\n }\n .log-bg-white {\n background-color: rgb(255, 255, 255);\n }\n";
19
+ export {};
@@ -0,0 +1,265 @@
1
+ export class ColoredConsole {
2
+ constructor(targetElement) {
3
+ this.targetElement = targetElement;
4
+ this.state = {
5
+ bold: false,
6
+ italic: false,
7
+ underline: false,
8
+ strikethrough: false,
9
+ foregroundColor: null,
10
+ backgroundColor: null,
11
+ carriageReturn: false,
12
+ secret: false,
13
+ };
14
+ }
15
+ logs() {
16
+ return this.targetElement.innerText;
17
+ }
18
+ addLine(line) {
19
+ const re = /(?:\033|\\033)(?:\[(.*?)[@-~]|\].*?(?:\007|\033\\))/g;
20
+ let i = 0;
21
+ if (this.state.carriageReturn) {
22
+ if (line !== "\n") {
23
+ // don't remove if \r\n
24
+ this.targetElement.removeChild(this.targetElement.lastChild);
25
+ }
26
+ this.state.carriageReturn = false;
27
+ }
28
+ if (line.includes("\r")) {
29
+ this.state.carriageReturn = true;
30
+ }
31
+ const lineSpan = document.createElement("span");
32
+ lineSpan.classList.add("line");
33
+ this.targetElement.appendChild(lineSpan);
34
+ const addSpan = (content) => {
35
+ if (content === "")
36
+ return;
37
+ const span = document.createElement("span");
38
+ if (this.state.bold)
39
+ span.classList.add("log-bold");
40
+ if (this.state.italic)
41
+ span.classList.add("log-italic");
42
+ if (this.state.underline)
43
+ span.classList.add("log-underline");
44
+ if (this.state.strikethrough)
45
+ span.classList.add("log-strikethrough");
46
+ if (this.state.secret)
47
+ span.classList.add("log-secret");
48
+ if (this.state.foregroundColor !== null)
49
+ span.classList.add(`log-fg-${this.state.foregroundColor}`);
50
+ if (this.state.backgroundColor !== null)
51
+ span.classList.add(`log-bg-${this.state.backgroundColor}`);
52
+ span.appendChild(document.createTextNode(content));
53
+ lineSpan.appendChild(span);
54
+ if (this.state.secret) {
55
+ const redacted = document.createElement("span");
56
+ redacted.classList.add("log-secret-redacted");
57
+ redacted.appendChild(document.createTextNode("[redacted]"));
58
+ lineSpan.appendChild(redacted);
59
+ }
60
+ };
61
+ while (true) {
62
+ const match = re.exec(line);
63
+ if (match === null)
64
+ break;
65
+ const j = match.index;
66
+ addSpan(line.substring(i, j));
67
+ i = j + match[0].length;
68
+ if (match[1] === undefined)
69
+ continue;
70
+ for (const colorCode of match[1].split(";")) {
71
+ switch (parseInt(colorCode)) {
72
+ case 0:
73
+ // reset
74
+ this.state.bold = false;
75
+ this.state.italic = false;
76
+ this.state.underline = false;
77
+ this.state.strikethrough = false;
78
+ this.state.foregroundColor = null;
79
+ this.state.backgroundColor = null;
80
+ this.state.secret = false;
81
+ break;
82
+ case 1:
83
+ this.state.bold = true;
84
+ break;
85
+ case 3:
86
+ this.state.italic = true;
87
+ break;
88
+ case 4:
89
+ this.state.underline = true;
90
+ break;
91
+ case 5:
92
+ this.state.secret = true;
93
+ break;
94
+ case 6:
95
+ this.state.secret = false;
96
+ break;
97
+ case 9:
98
+ this.state.strikethrough = true;
99
+ break;
100
+ case 22:
101
+ this.state.bold = false;
102
+ break;
103
+ case 23:
104
+ this.state.italic = false;
105
+ break;
106
+ case 24:
107
+ this.state.underline = false;
108
+ break;
109
+ case 29:
110
+ this.state.strikethrough = false;
111
+ break;
112
+ case 30:
113
+ this.state.foregroundColor = "black";
114
+ break;
115
+ case 31:
116
+ this.state.foregroundColor = "red";
117
+ break;
118
+ case 32:
119
+ this.state.foregroundColor = "green";
120
+ break;
121
+ case 33:
122
+ this.state.foregroundColor = "yellow";
123
+ break;
124
+ case 34:
125
+ this.state.foregroundColor = "blue";
126
+ break;
127
+ case 35:
128
+ this.state.foregroundColor = "magenta";
129
+ break;
130
+ case 36:
131
+ this.state.foregroundColor = "cyan";
132
+ break;
133
+ case 37:
134
+ this.state.foregroundColor = "white";
135
+ break;
136
+ case 39:
137
+ this.state.foregroundColor = null;
138
+ break;
139
+ case 41:
140
+ this.state.backgroundColor = "red";
141
+ break;
142
+ case 42:
143
+ this.state.backgroundColor = "green";
144
+ break;
145
+ case 43:
146
+ this.state.backgroundColor = "yellow";
147
+ break;
148
+ case 44:
149
+ this.state.backgroundColor = "blue";
150
+ break;
151
+ case 45:
152
+ this.state.backgroundColor = "magenta";
153
+ break;
154
+ case 46:
155
+ this.state.backgroundColor = "cyan";
156
+ break;
157
+ case 47:
158
+ this.state.backgroundColor = "white";
159
+ break;
160
+ case 40:
161
+ case 49:
162
+ this.state.backgroundColor = null;
163
+ break;
164
+ }
165
+ }
166
+ }
167
+ addSpan(line.substring(i));
168
+ if (this.targetElement.scrollTop + 56 >=
169
+ this.targetElement.scrollHeight - this.targetElement.offsetHeight) {
170
+ // at bottom
171
+ this.targetElement.scrollTop = this.targetElement.scrollHeight;
172
+ }
173
+ }
174
+ }
175
+ export const coloredConsoleStyles = `
176
+ .log {
177
+ flex: 1;
178
+ background-color: #1c1c1c;
179
+ font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
180
+ monospace;
181
+ font-size: 12px;
182
+ padding: 16px;
183
+ overflow: auto;
184
+ line-height: 1.45;
185
+ border-radius: 3px;
186
+ white-space: pre-wrap;
187
+ overflow-wrap: break-word;
188
+ color: #ddd;
189
+ }
190
+
191
+ .log-bold {
192
+ font-weight: bold;
193
+ }
194
+ .log-italic {
195
+ font-style: italic;
196
+ }
197
+ .log-underline {
198
+ text-decoration: underline;
199
+ }
200
+ .log-strikethrough {
201
+ text-decoration: line-through;
202
+ }
203
+ .log-underline.log-strikethrough {
204
+ text-decoration: underline line-through;
205
+ }
206
+ .log-secret {
207
+ -webkit-user-select: none;
208
+ -moz-user-select: none;
209
+ -ms-user-select: none;
210
+ user-select: none;
211
+ }
212
+ .log-secret-redacted {
213
+ opacity: 0;
214
+ width: 1px;
215
+ font-size: 1px;
216
+ }
217
+ .log-fg-black {
218
+ color: rgb(128, 128, 128);
219
+ }
220
+ .log-fg-red {
221
+ color: rgb(255, 0, 0);
222
+ }
223
+ .log-fg-green {
224
+ color: rgb(0, 255, 0);
225
+ }
226
+ .log-fg-yellow {
227
+ color: rgb(255, 255, 0);
228
+ }
229
+ .log-fg-blue {
230
+ color: rgb(0, 0, 255);
231
+ }
232
+ .log-fg-magenta {
233
+ color: rgb(255, 0, 255);
234
+ }
235
+ .log-fg-cyan {
236
+ color: rgb(0, 255, 255);
237
+ }
238
+ .log-fg-white {
239
+ color: rgb(187, 187, 187);
240
+ }
241
+ .log-bg-black {
242
+ background-color: rgb(0, 0, 0);
243
+ }
244
+ .log-bg-red {
245
+ background-color: rgb(255, 0, 0);
246
+ }
247
+ .log-bg-green {
248
+ background-color: rgb(0, 255, 0);
249
+ }
250
+ .log-bg-yellow {
251
+ background-color: rgb(255, 255, 0);
252
+ }
253
+ .log-bg-blue {
254
+ background-color: rgb(0, 0, 255);
255
+ }
256
+ .log-bg-magenta {
257
+ background-color: rgb(255, 0, 255);
258
+ }
259
+ .log-bg-cyan {
260
+ background-color: rgb(0, 255, 255);
261
+ }
262
+ .log-bg-white {
263
+ background-color: rgb(255, 255, 255);
264
+ }
265
+ `;
@@ -0,0 +1,2 @@
1
+ export declare const fileDownload: (href: string, filename?: string) => void;
2
+ export declare const textDownload: (text: string, filename?: string) => void;
@@ -0,0 +1,15 @@
1
+ export const fileDownload = (href, filename = "") => {
2
+ const a = document.createElement("a");
3
+ a.target = "_blank";
4
+ a.href = href;
5
+ a.download = filename;
6
+ document.body.appendChild(a);
7
+ a.dispatchEvent(new MouseEvent("click"));
8
+ document.body.removeChild(a);
9
+ };
10
+ export const textDownload = (text, filename = "") => {
11
+ const blob = new Blob([text], { type: "text/plain" });
12
+ const url = URL.createObjectURL(blob);
13
+ fileDownload(url, filename);
14
+ setTimeout(() => URL.revokeObjectURL(url), 0);
15
+ };
@@ -0,0 +1,5 @@
1
+ export declare const fireEvent: <Event_1 extends keyof HTMLElementEventMap>(eventTarget: EventTarget, type: Event_1, detail?: HTMLElementEventMap[Event_1]["detail"] | undefined, options?: {
2
+ bubbles?: boolean;
3
+ cancelable?: boolean;
4
+ composed?: boolean;
5
+ }) => void;
@@ -0,0 +1,12 @@
1
+ export const fireEvent = (eventTarget, type,
2
+ // @ts-ignore
3
+ detail, options) => {
4
+ options = options || {};
5
+ const event = new CustomEvent(type, {
6
+ bubbles: options.bubbles === undefined ? true : options.bubbles,
7
+ cancelable: Boolean(options.cancelable),
8
+ composed: options.composed === undefined ? true : options.composed,
9
+ detail,
10
+ });
11
+ eventTarget.dispatchEvent(event);
12
+ };
@@ -0,0 +1,5 @@
1
+ export declare class LineBreakTransformer implements Transformer<string, string> {
2
+ private chunks;
3
+ transform(chunk: string, controller: TransformStreamDefaultController<string>): void;
4
+ flush(controller: TransformStreamDefaultController<string>): void;
5
+ }