Skip to content

Commit 93df247

Browse files
Jack-WorksJack-Works
committed
update website
1 parent 8574f29 commit 93df247

File tree

18 files changed

+220
-158
lines changed

18 files changed

+220
-158
lines changed

‎devtools.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<meta charset="utf-8" />
4+
<title>engine262 playground</title>
5+
<!--
6+
Checkout the latest rev at https://chromium.googlesource.com/devtools/devtools-frontend/+log
7+
Current commit 0117805c961fd556515972b79a7042408d6fd036 is committed on Tue Nov 11 07:54:04 2025
8+
The most recent commit may not been built yet, so you may need to use a commit few days ago.
9+
You can access https://chrome-devtools-frontend.appspot.com/serve_rev/@0117805c961fd556515972b79a7042408d6fd036/panels/sources/sources.js
10+
11+
After update, the first few access will be extremely slow. Refresh it a few times so it get cached by Google servers.
12+
-->
13+
<script type="importmap">
14+
{
15+
"imports": {
16+
"chrome-devtools-frontend/": "https://chrome-devtools-frontend.appspot.com/serve_rev/@0117805c961fd556515972b79a7042408d6fd036/"
17+
}
18+
}
19+
</script>
20+
<link rel="modulepreload" href="./src/late-panels.mjs" as="script" />
21+
<link rel="modulepreload" href="./src/262_worker.mjs" as="script" />
22+
<meta
23+
http-equiv="Content-Security-Policy"
24+
content="object-src 'none'; script-src 'self' 'sha256-YCezwjqZIYZtHaYW1WJzVCeRrxO0ie1Wg6rRb3iSlno=' https://chrome-devtools-frontend.appspot.com https://cdn.jsdelivr.net/ https://engine262.js.org/"
25+
/>
26+
<meta name="referrer" content="no-referrer" />
27+
<link href="./src/devtools/style.css" rel="stylesheet" />
28+
<link
29+
href="https://chrome-devtools-frontend.appspot.com/serve_rev/@0117805c961fd556515972b79a7042408d6fd036/application_tokens.css"
30+
rel="stylesheet"
31+
/>
32+
<link
33+
href="https://chrome-devtools-frontend.appspot.com/serve_rev/@0117805c961fd556515972b79a7042408d6fd036/design_system_tokens.css"
34+
rel="stylesheet"
35+
/>
36+
<template id="engine262-readme-template">
37+
<main id="engine262-readme">
38+
<div class="page-title" role="heading" aria-level="1">
39+
<a href="https://github.com/engine262/engine262/" target="_blank">engine262</a>
40+
<span></span>
41+
</div>
42+
<a href="https://github.com/engine262/engine262" target="_blank">
43+
<span id="star-me">Star me on GitHub</span>
44+
</a>
45+
<article></article>
46+
</main>
47+
</template>
48+
49+
<body class="undocked" id="-blink-dev-tools">
50+
<dialog id="loading">Loading...</dialog>
51+
<div id="fork" class='card-wrap'>
52+
</div>
53+
<script>
54+
const loading = document.querySelector('#loading');
55+
try {
56+
loading.showModal()
57+
} catch (e) {}
58+
window.addEventListener('loaded', () => {
59+
try {
60+
loading.close()
61+
} catch (e) {}
62+
})
63+
window.addEventListener('error', () => {
64+
try {
65+
loading.close()
66+
} catch (e) {}
67+
})
68+
</script>
69+
<script type="module" src="./src/devtools/index.mjs"></script>
70+
</body>
71+
</html>

‎index.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<link rel="stylesheet" href="./style.css">
4+
<link rel="stylesheet" href="./src/classic/style.css">
55
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/codemirror.min.css">
66
<title>engine262</title>
77
</head>
@@ -26,7 +26,7 @@ <h1>engine262</h1>
2626
<p style="display: inline-block; width: fit-content;">
2727
A JavaScript engine written in JavaScript for development and exploration.
2828
<br />
29-
<marquee>Try <a href="./next.html">Chrome Devtools</a> style engine262 playground! [Apr 1 2025 News]</marquee>
29+
Try <a href="./next.html">Chrome Devtools</a> style engine262 playground!
3030
</p>
3131

3232
<main>
@@ -37,6 +37,7 @@ <h1>engine262</h1>
3737
</fieldset>
3838

3939
<fieldset>
40+
<button type="button" id="select-file">Select File</button>
4041
<legend>Editor</legend>
4142
<label><input id="autoevaluate" checked type="checkbox">Auto Evaluate</label>
4243
<select id="mode">
@@ -61,7 +62,7 @@ <h2>Output:</h2>
6162
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/mode/javascript/javascript.min.js"></script>
6263
<script src="https://unpkg.com/[email protected]/libs/base64-string.js"></script>
6364
<script src="https://unpkg.com/[email protected]/libs/lz-string.min.js"></script>
64-
<script type="module" src="./src/index.mjs"></script>
65+
<script type="module" src="./src/classic/index.mjs"></script>
6566
</script>
6667
</body>
6768
</html>

‎lib/engine262.d.mts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
1+
// To get type definitions, run
2+
// > ln -s path_to_engine262_repo ./engine262
3+
// If this is in the submodule of engine262, run
4+
// > ln -s ../../ ./engine262
15
export * from './engine262/lib/engine262.mjs';

‎next.html‎

Lines changed: 7 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,11 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
34
<meta charset="utf-8" />
4-
<title>engine262 playground</title>
5-
<!--
6-
Checkout the latest rev at https://chromium.googlesource.com/devtools/devtools-frontend/+log
7-
Current commit 74c3cc088489c98b643d79c3eb480e8acedf377e is committed on Mon Mar 10 14:18:10 2025
8-
The most recent commit may not been built yet, so you may need to use a commit few days ago.
9-
-->
10-
<script type="importmap">
11-
{
12-
"imports": {
13-
"chrome-devtools-frontend/": "https://chrome-devtools-frontend.appspot.com/serve_rev/@74c3cc088489c98b643d79c3eb480e8acedf377e/"
14-
}
15-
}
16-
</script>
17-
<link rel="modulepreload" href="./src/late-panels.mjs" as="script" />
18-
<link rel="modulepreload" href="./src/262_worker.mjs" as="script" />
19-
<meta
20-
http-equiv="Content-Security-Policy"
21-
content="object-src 'none'; script-src 'self' 'sha256-YCezwjqZIYZtHaYW1WJzVCeRrxO0ie1Wg6rRb3iSlno=' https://chrome-devtools-frontend.appspot.com https://cdn.jsdelivr.net/ https://engine262.js.org/"
22-
/>
23-
<meta name="referrer" content="no-referrer" />
24-
<link href="./next-style.css" rel="stylesheet" />
25-
<link
26-
href="https://chrome-devtools-frontend.appspot.com/serve_rev/@74c3cc088489c98b643d79c3eb480e8acedf377e/application_tokens.css"
27-
rel="stylesheet"
28-
/>
29-
<link
30-
href="https://chrome-devtools-frontend.appspot.com/serve_rev/@74c3cc088489c98b643d79c3eb480e8acedf377e/design_system_tokens.css"
31-
rel="stylesheet"
32-
/>
33-
<template id="engine262-readme-template">
34-
<main id="engine262-readme">
35-
<div class="page-title" role="heading" aria-level="1">
36-
<a href="https://github.com/engine262/engine262/" target="_blank">engine262</a>
37-
<span></span>
38-
</div>
39-
<a href="https://github.com/engine262/engine262" target="_blank">
40-
<span id="star-me">Star me on GitHub</span>
41-
</a>
42-
<article></article>
43-
</main>
44-
</template>
45-
46-
<body class="undocked" id="-blink-dev-tools">
47-
<dialog id="loading">Loading...</dialog>
48-
<div id="fork" class='card-wrap'>
49-
</div>
50-
<script>
51-
const loading = document.querySelector('#loading');
52-
try {
53-
loading.showModal()
54-
} catch (e) {}
55-
window.addEventListener('loaded', () => {
56-
try {
57-
loading.close()
58-
} catch (e) {}
59-
})
60-
window.addEventListener('error', () => {
61-
try {
62-
loading.close()
63-
} catch (e) {}
64-
})
65-
</script>
66-
<script type="module" src="./src/next.mjs"></script>
67-
</body>
5+
<title>Redirecting...</title>
6+
<meta http-equiv="refresh" content="0; URL=./devtools.html" />
7+
</head>
8+
<body>
9+
<p>If you are not redirected automatically, follow this <a href="./devtools.html">link to devtools.html</a>.</p>
10+
</body>
6811
</html>

src/editor.mjs renamed to src/classic/editor.mjs

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,35 @@
33
import { getState, setState } from './state.mjs';
44
import { evaluate } from './runner.mjs';
55

6+
/** @type {HTMLInputElement | null} */
67
const autoEvaluate = document.querySelector('#autoevaluate');
8+
const selectFileButton = document.querySelector('#select-file');
9+
selectFileButton?.addEventListener('click', async () => {
10+
const input = document.createElement('input');
11+
input.type = 'file';
12+
input.click();
13+
input.onchange = async () => {
14+
const file = input.files?.[0];
15+
if (!file) {
16+
return;
17+
}
18+
const content = await file.text();
19+
editor.setValue(content);
20+
}
21+
});
22+
/** @type {HTMLButtonElement | null} */
723
const runButton = document.querySelector('#run');
24+
/** @type {HTMLSelectElement | null} */
825
const mode = document.querySelector('#mode');
926

1027
const editor = CodeMirror.fromTextArea(document.querySelector('#input'), {
1128
lineNumbers: true,
1229
mode: 'javascript',
1330
});
1431

32+
/** @type {ReturnType<typeof setTimeout> | null} */
1533
let onChangeTimer;
16-
function run(timer) {
34+
function run(/** @type {boolean} */timer) {
1735
if (timer) {
1836
if (onChangeTimer !== null) {
1937
clearTimeout(onChangeTimer);
@@ -28,27 +46,29 @@ function run(timer) {
2846
}
2947

3048
editor.on('change', () => {
31-
if (!autoEvaluate.checked) {
49+
if (!autoEvaluate?.checked) {
3250
return;
3351
}
3452
run(true);
3553
});
3654

37-
runButton.addEventListener('click', () => {
55+
runButton?.addEventListener('click', () => {
3856
run(false);
3957
});
4058

4159
getState('code')
42-
.then((code) => {
60+
.then((/** @type {any} */ code) => {
4361
editor.setValue(code);
4462
});
4563

46-
mode.addEventListener('change', () => {
64+
mode?.addEventListener('change', () => {
4765
setState('mode', mode.value);
4866
run(false);
4967
});
5068

5169
getState('mode')
52-
.then((m) => {
53-
mode.value = m;
70+
.then((/** @type {any} */ m) => {
71+
if (mode) {
72+
mode.value = m;
73+
}
5474
});

‎src/classic/global.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare const CodeMirror: any;
2+
interface Element {
3+
close?(): void;
4+
}

src/index.mjs renamed to src/classic/index.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import './state.mjs';
22
import './editor.mjs';
33

44
try {
5-
document.querySelector('#loading').close();
5+
document.querySelector('#loading')?.close?.();
66
} catch (e) {
77
// not all browsers support this
88
}

src/runner.mjs renamed to src/classic/runner.mjs

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,19 @@ import { getState, updateState } from './state.mjs';
33
const features = document.querySelector('#features');
44
const output = document.querySelector('#output');
55

6+
/** @type {Worker} */
67
let worker;
78
function respawn(first = false) {
89
if (worker) {
910
worker.terminate();
1011
}
11-
worker = new Worker(new URL('./worker.js', import.meta.url));
12+
worker = new Worker(new URL('./worker.mjs', import.meta.url), { type: 'module' });
1213
worker.addEventListener('message', ({ data }) => {
1314
console.log('@MAIN', data); // eslint-disable-line no-console
1415

1516
if (first && data.type === 'initialize') {
1617
const { FEATURES } = data.value;
17-
FEATURES.forEach(({ name, flag }) => {
18+
FEATURES.forEach((/** @type {any} */ { name, flag }) => {
1819
// <li>
1920
// <label>
2021
// <input type="checkbox">
@@ -26,7 +27,7 @@ function respawn(first = false) {
2627
input.type = 'checkbox';
2728
input.addEventListener('change', () => {
2829
getState('features')
29-
.then((f) => {
30+
.then((/** @type {any} */ f) => {
3031
if (input.checked) {
3132
f.add(flag);
3233
} else {
@@ -37,7 +38,7 @@ function respawn(first = false) {
3738
});
3839
});
3940
getState('features')
40-
.then((requestedFeatures) => {
41+
.then((/** @type {any} */ requestedFeatures) => {
4142
input.checked = requestedFeatures.has(flag);
4243
});
4344

@@ -48,38 +49,38 @@ function respawn(first = false) {
4849
const li = document.createElement('li');
4950
li.appendChild(label);
5051

51-
features.appendChild(li);
52+
features?.appendChild(li);
5253
});
5354
} else if (data.type === 'console') {
5455
if (data.value.method === 'clear') {
5556
const range = document.createRange();
56-
range.selectNodeContents(output);
57+
output && range.selectNodeContents(output);
5758
range.deleteContents();
5859
} else {
5960
const line = document.createElement('span');
60-
data.value.values.forEach((v) => {
61+
data.value.values.forEach((/** @type {any} */ v) => {
6162
line.textContent += v;
6263
line.textContent += ' ';
6364
});
6465
const container = document.createElement('div');
6566
container.className = `log-${data.value.method}`;
6667
container.appendChild(line);
67-
output.appendChild(container);
68+
output?.appendChild(container);
6869
}
6970
} else if (data.type === 'unhandledRejection') {
7071
const line = document.createElement('span');
7172
line.textContent = `Unhandled Rejection:\n${data.value}`;
7273
const container = document.createElement('div');
7374
container.className = 'log-error';
7475
container.appendChild(line);
75-
output.appendChild(container);
76+
output?.appendChild(container);
7677
}
7778
});
7879
}
7980

80-
export function evaluate(code) {
81+
export function evaluate(/** @type {string} */ code) {
8182
getState()
82-
.then((state) => {
83+
.then((/** @type {any} */ state) => {
8384
state.set('code', code);
8485
worker.postMessage({ type: 'evaluate', value: { code, state } });
8586
return updateState();

src/state.mjs renamed to src/classic/state.mjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const initial = new Map([
1414
['features', new Set()],
1515
]);
1616

17+
/** @type {any} */
1718
let state;
1819

1920
if (query.has('gist')) {

0 commit comments

Comments
 (0)