-
-
Notifications
You must be signed in to change notification settings - Fork 89
/
live-viewer.mjs
139 lines (119 loc) · 3.83 KB
/
live-viewer.mjs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
import whatwgURL from "./whatwg-url.mjs";
const urlInput = document.querySelector("#url");
const baseInput = document.querySelector("#base");
const te = new TextEncoder();
const td = new TextDecoder();
const components = [
"href",
"protocol",
"username",
"password",
"port",
"hostname",
"pathname",
"search",
"hash",
"origin"
];
urlInput.addEventListener("input", update);
baseInput.addEventListener("input", update);
window.addEventListener("hashchange", setFromFragment);
setFromFragment();
function update() {
const browserResult = getBrowserResult();
const jsdomResult = getJsdomResult();
const mismatchedComponents = getMismatchedComponents(browserResult, jsdomResult);
setResult("browser", browserResult, mismatchedComponents);
setResult("jsdom", jsdomResult, mismatchedComponents);
updateFragmentForSharing();
}
function setResult(kind, result, mismatchedComponents) {
const output = document.querySelector(`#${kind}-output`);
const error = document.querySelector(`#${kind}-error`);
if (result instanceof Error) {
output.hidden = true;
error.hidden = false;
error.textContent = result.toString();
} else {
output.hidden = false;
error.hidden = true;
for (const component of components) {
const componentEl = output.querySelector(`.${component}`).querySelector("td");
setComponentElValue(componentEl, result[component]);
setComponentElMismatch(componentEl, mismatchedComponents.has(component));
}
}
}
function setComponentElValue(componentEl, value) {
// This shows up in Edge where username/password are undefined.
const isNonString = typeof value !== "string";
const isEmptyString = value === "";
componentEl.textContent = isEmptyString ? "(empty string)" : value;
componentEl.classList.toggle("empty-string", isEmptyString);
componentEl.classList.toggle("non-string", isNonString);
}
function setComponentElMismatch(componentEl, isMismatched) {
componentEl.classList.toggle("pass", !isMismatched);
componentEl.classList.toggle("fail", isMismatched);
}
function getMismatchedComponents(result1, result2) {
const mismatched = new Set();
for (const component of components) {
if (result1[component] !== result2[component]) {
mismatched.add(component);
}
}
return mismatched;
}
function getBrowserResult() {
try {
return new URL(urlInput.value, baseInput.value);
} catch (e) {
return e;
}
}
function getJsdomResult() {
try {
return new whatwgURL.URL(urlInput.value, baseInput.value);
} catch (e) {
return e;
}
}
function updateFragmentForSharing() {
location.hash = `url=${encodeToBase64(urlInput.value)}&base=${encodeToBase64(baseInput.value)}`;
}
function setFromFragment() {
const pieces = /#url=([^&]*)&base=(.*)/u.exec(location.hash);
if (!pieces) {
return;
}
const [, urlEncoded, baseEncoded] = pieces;
try {
urlInput.value = decodeFromBase64(urlEncoded);
} catch (e) {
// eslint-disable-next-line no-console
console.warn("url hash parameter was not deserializable.");
}
try {
baseInput.value = decodeFromBase64(baseEncoded);
} catch (e) {
// eslint-disable-next-line no-console
console.warn("base hash parameter was not deserializable.");
}
update();
}
// btoa / atob don't work on Unicode.
// This version is a superset of btoa / atob, so it maintains compatibility with older versions of
// the live viewer which used btoa / atob directly.
function encodeToBase64(originalString) {
const bytes = te.encode(originalString);
const byteString = Array.from(bytes, byte => String.fromCharCode(byte)).join("");
const encoded = btoa(byteString);
return encoded;
}
function decodeFromBase64(encoded) {
const byteString = atob(encoded);
const bytes = Uint8Array.from(byteString, char => char.charCodeAt(0));
const originalString = td.decode(bytes);
return originalString;
}