schoolbox web extension :)
fix(hot reload): misc. bugs and race conditions
+55
-31
+7
-4
src/entrypoints/plugins/homepageSwitcher.ts
+7
-4
src/entrypoints/plugins/homepageSwitcher.ts
···
2
2
import { definePlugin } from "@/utils/plugin";
3
3
4
4
let logos: HTMLAnchorElement[] | null = null;
5
-
const controller = new AbortController();
5
+
let controller: AbortController | null = null;
6
6
7
7
export default function init() {
8
8
definePlugin(
···
14
14
15
15
// add event listeners
16
16
const closeCurrentTab = settings?.toggle.closeCurrentTab === true;
17
+
controller = new AbortController();
18
+
17
19
for (const logo of logos) {
18
20
logo.addEventListener(
19
21
"click",
···
35
37
}
36
38
},
37
39
() => {
38
-
if (logos === null) return;
39
-
40
40
// remove event listeners
41
-
controller.abort();
41
+
if (controller) {
42
+
controller.abort();
43
+
controller = null;
44
+
}
42
45
43
46
logos = null;
44
47
},
+10
-4
src/entrypoints/plugins/scrollPeriod.ts
+10
-4
src/entrypoints/plugins/scrollPeriod.ts
···
2
2
import { definePlugin } from "@/utils/plugin";
3
3
4
4
let interval: NodeJS.Timeout | null = null;
5
-
const controller = new AbortController();
5
+
let controller: AbortController | null = null;
6
6
7
7
export default function init() {
8
8
definePlugin(
···
23
23
setUpdateInterval();
24
24
25
25
if (resetCooldownOnMouseMove === true) {
26
+
controller = new AbortController();
26
27
document.addEventListener(
27
28
"mousemove",
28
29
() => {
···
37
38
}
38
39
},
39
40
() => {
40
-
controller.abort();
41
-
if (interval) clearInterval(interval);
42
-
interval = null;
41
+
if (controller) {
42
+
controller.abort();
43
+
controller = null;
44
+
}
45
+
if (interval) {
46
+
clearInterval(interval);
47
+
interval = null;
48
+
}
43
49
},
44
50
[".timetable"],
45
51
);
+6
-6
src/entrypoints/plugins/subheader/index.ts
+6
-6
src/entrypoints/plugins/subheader/index.ts
···
61
61
// stop updating the subheader
62
62
intervals.forEach((interval) => clearInterval(interval));
63
63
64
-
for (const child of oldChildren) {
65
-
// remove new children
66
-
while (subheader.firstChild) {
67
-
subheader.removeChild(subheader.firstChild);
68
-
}
64
+
// remove new children
65
+
while (subheader.firstChild) {
66
+
subheader.removeChild(subheader.firstChild);
67
+
}
69
68
70
-
// restore old children
69
+
// restore old children
70
+
for (const child of oldChildren) {
71
71
subheader.appendChild(child);
72
72
}
73
73
+10
src/entrypoints/start.content.ts
+10
src/entrypoints/start.content.ts
···
40
40
const updateUserSnippets: WatchCallback<Settings> = (newValue, oldValue) => {
41
41
// if global or userSnippets were changed
42
42
if (hasChanged(newValue, oldValue, ["global", "userSnippets"])) {
43
+
// uninject removed snippets
44
+
if (oldValue) {
45
+
for (const id of Object.keys(oldValue.userSnippets)) {
46
+
if (!newValue.userSnippets[id]) {
47
+
uninjectUserSnippet(id);
48
+
}
49
+
}
50
+
}
51
+
52
+
// inject/uninject current snippets
43
53
for (const [id, userSnippet] of Object.entries(newValue.userSnippets)) {
44
54
if (newValue.global && newValue.snippets && userSnippet.toggle) {
45
55
injectUserSnippet(id);
+10
-11
src/utils/index.ts
+10
-11
src/utils/index.ts
···
130
130
}
131
131
132
132
// check not already injected
133
-
const style = document.querySelector(dataAttr(`userSnippet-${id}`));
134
-
if (style) {
133
+
if (document.querySelector(dataAttr(`userSnippet-${id}`))) {
135
134
logger.info(`user snippet with id ${id} already injected, aborting`);
136
135
return;
137
136
}
138
137
139
138
// inject user snippet
140
-
fetch(`https://gist.githubusercontent.com/${snippet.author}/${id}/raw`)
141
-
.then((response) => response.text())
142
-
.then((css) => {
143
-
const style = document.createElement("style");
144
-
style.textContent = css;
145
-
setDataAttr(style, `userSnippet-${id}`);
146
-
document.head.appendChild(style);
147
-
logger.info(`injected user snippet with id ${id}`);
148
-
});
139
+
const response = await fetch(`https://gist.githubusercontent.com/${snippet.author}/${id}/raw`);
140
+
const css = await response.text();
141
+
const style = document.createElement("style");
142
+
143
+
style.textContent = css;
144
+
setDataAttr(style, `userSnippet-${id}`);
145
+
document.head.appendChild(style);
146
+
147
+
logger.info(`injected user snippet with id ${id}`);
149
148
}
150
149
151
150
export function uninjectUserSnippet(id: string) {
+8
-3
src/utils/plugin.ts
+8
-3
src/utils/plugin.ts
···
53
53
}
54
54
}
55
55
});
56
-
plugins[pluginId].toggle.watch((newValue) => {
57
-
if (newValue.toggle) {
56
+
plugins[pluginId].toggle.watch(async (newValue) => {
57
+
const settings = await globalSettings.get();
58
+
if (newValue.toggle && settings.global && settings.plugins) {
58
59
inject();
59
60
} else {
60
61
uninject();
···
66
67
for (const setting of Object.values(plugins[pluginId].settings)) {
67
68
setting.state.watch(async () => {
68
69
uninject();
69
-
if ((await plugins[pluginId].toggle.get()).toggle) inject();
70
+
const settings = await globalSettings.get();
71
+
const toggle = await plugins[pluginId].toggle.get();
72
+
if (toggle && settings.global && settings.plugins) {
73
+
inject();
74
+
}
70
75
});
71
76
}
72
77
}
+2
-1
src/utils/snippet.ts
+2
-1
src/utils/snippet.ts
···
37
37
}
38
38
}
39
39
});
40
-
snippets[snippetId].toggle.watch((newValue, oldValue) => {
40
+
snippets[snippetId].toggle.watch(async (newValue, oldValue) => {
41
41
if (hasChanged(newValue, oldValue, ["toggle"])) {
42
+
const settings = await globalSettings.get();
42
43
if (newValue.toggle && settings.global && settings.snippets) {
43
44
inject();
44
45
} else {
+2
-2
src/utils/storage/state.svelte.ts
+2
-2
src/utils/storage/state.svelte.ts
···
1
1
import type { WxtStorageItem } from "#imports";
2
-
import { WatchCallback } from "wxt/utils/storage";
2
+
import type { WatchCallback } from "wxt/utils/storage";
3
3
4
4
export class StorageState<T> {
5
5
public state;
···
28
28
}
29
29
30
30
async update(updates: Partial<T>) {
31
-
this.set({
31
+
await this.set({
32
32
...(await this.get()),
33
33
...updates,
34
34
});