Skip to content

Commit 01fb0a2

Browse files
javascript-2020javascript-2020
committed
save file
1 parent b92bb0b commit 01fb0a2

1 file changed

Lines changed: 294 additions & 0 deletions

File tree

‎utils/misc/nodejs-terminal/v2.0/nodejs-terminal-v2.0.html‎

Lines changed: 294 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,294 @@
1+
2+
3+
4+
<!-- headers
5+
cross-origin-isolate
6+
-->
7+
8+
9+
<!DOCTYPE html>
10+
11+
12+
<html>
13+
14+
<head>
15+
<meta charset=utf-8>
16+
17+
<title>
18+
Node.js Terminal
19+
</title>
20+
21+
<meta name=description content=''>
22+
23+
<base href='https://ext-code.com/utils/misc/terminal/'>
24+
<link rel=canonical href='https://ext-code.com/utils/misc/terminal/terminal.html'>
25+
26+
<link rel='shortcut icon' type='image/x-icon' href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAcCAMAAABBJv+bAAAAQlBMVEVHcEwyODg0ODkzNzgxNzc0ODk0ODkzODgzODgzNzgyNzgzODg0ODkzODgyNzgzODgzODgzODk0ODk0ODkyNzg0ODmObyvDAAAAFXRSTlMABvaSDbPHe15GL5u9hRxvO6rn2VJXM6DpAAAAxElEQVQoz71TyRbDIAh0Ie6J2fz/Xy3Y2pDktZ5aTiODCAMK0QxAPoFsgNk0JrMEQmEwyU5ndt4K2khQEzLhdNeQTznCWREegNEOOe18fRO8i6ooz+gRw1k9gMkyo/E9zY5yKMX+ihbLq8mjFB5N4UepYLGRmdM7OnLlpYtJXWQQkFCIpHcpfBVpCxeRV/KuodHzmfaNxuTmlpxmoEzc5bs0rnGdQQZeybWxRX6Vxf5rJJ116CxTZxX5Isf7Ive+wadP9AAuFg97y3bd7gAAAABJRU5ErkJggg=='>
27+
<meta name=viewport content='width=device-width, initial-scale=1'>
28+
29+
<script type='application/ld+json'>
30+
{
31+
"@context" : "https://schema.org",
32+
"@type" : "SoftwareApplication",
33+
"name" : "Node.js Terminal",
34+
"url" : "https://ext-code.com/utils/misc/terminal/terminal.html",
35+
"author" : {"@type":"Person","name":"Matthew Richards"},
36+
"description" : "Use this tool to quickly setup a terminal with a nodejs / npm environments and experiment without touching the local disk.",
37+
"applicationCategory" : "DeveloperApplication",
38+
"operatingSystem" : "All",
39+
"browserRequirements" : "Requires JavaScript-enabled browser",
40+
"softwareVersion" : "1.0.0",
41+
"offers" : {"@type":"Offer","price":"0","priceCurrency":"GBP"}
42+
}
43+
</script>
44+
45+
46+
<script src='https://libs.ext-code.com/js/dom/component/v3.0/component.js'></script>
47+
48+
<script init>
49+
console.clear();
50+
console.log('terminal-v2.0.html');
51+
console.log();
52+
console.json=v=>console.log(JSON.stringify(v,null,4));
53+
var version='v2.0';
54+
var df=true
55+
;
56+
57+
var ext;
58+
var $;
59+
var datatype;
60+
var menumod;
61+
var keydown;
62+
var debug;
63+
64+
var menu;
65+
66+
var hdr;
67+
68+
69+
async function init(){
70+
71+
72+
menu = menumod();
73+
74+
mod.base.add({ext,$,datatype,keydown,menu,menumod});
75+
76+
77+
hdr = mod['misc-hdr'];
78+
79+
hdr.initmod({ext,$});
80+
81+
82+
await Promise.all([
83+
hdr.init(),
84+
]);
85+
86+
87+
initdom();
88+
89+
90+
}//init
91+
92+
93+
(async()=>{
94+
95+
mod.stack.add;
96+
97+
({ext} = await import('https://libs.ext-code.com/js/io/ext-loader/ext-loader.m.js'));
98+
99+
var promise = ext.load.libs(
100+
'js/dom/$.js',
101+
'js/core/datatype.js',
102+
'js/dom/menumod/menumod.js',
103+
'js/dom/keydown/keydown.js',
104+
'js/debug/debug.js',
105+
);
106+
[$,datatype,menumod,keydown,debug] = await promise;
107+
108+
mod.stack.complete;
109+
110+
})();
111+
112+
113+
</script>
114+
115+
116+
117+
118+
<link rel=stylesheet href='https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css'>
119+
120+
<style>
121+
122+
html
123+
{height:100%;font-family:arial}
124+
body
125+
{margin:20px;height:calc(100% - 40px);display:flex;flex-direction:column;gap:10px}
126+
127+
128+
#terminal
129+
{flex:1}
130+
131+
.terminal
132+
{padding:10px;border:2px solid lightgray;box-sizing:border-box}
133+
134+
135+
</style>
136+
137+
</head>
138+
139+
140+
<body>
141+
142+
143+
<misc-hdr v2.0 component=grp>
144+
<img slot=title class=title src='images/terminal.png' style='top:-15px;height:50px' alt='Node.js Terminal'>
145+
<time slot=date datetime=2026-04-19>
146+
19 Apr 2026
147+
</time>
148+
</misc-hdr>
149+
150+
151+
<div id=terminal></div>
152+
153+
154+
</body>
155+
156+
157+
<script>
158+
159+
160+
function initdom(){
161+
162+
}//initdom
163+
164+
165+
166+
167+
var theme = {};
168+
169+
theme.light = {
170+
foreground : 'black',//'#53676d',
171+
background : 'hsl(45,86%,98%)',//'#fbf3db',
172+
cursor : '#3a4d53',
173+
selectionBackground : '#cfcebe',
174+
black : '#e9e4d0',
175+
red : '#d2212d',
176+
green : '#489100',
177+
yellow : '#ad8900',
178+
blue : '#0072d4',
179+
magenta : '#8f0075',
180+
cyan : '#00938d',
181+
white : '#ffffff',
182+
brightBlack : '#7d7a68',
183+
brightRed : '#d2212d',
184+
brightGreen : '#489100',
185+
brightYellow : '#ad8900',
186+
brightBlue : '#0072d4',
187+
brightMagenta : '#8f0075',
188+
brightCyan : '#00938d',
189+
brightWhite : '#ffffff'
190+
};
191+
192+
193+
var x = {
194+
195+
reset : '\x1b[0m',
196+
197+
black : '\x1b[30m',
198+
red : '\x1b[31m',
199+
green : '\x1b[32m',
200+
yellow : '\x1b[33m',
201+
blue : '\x1b[34m',
202+
magenta : '\x1b[35m',
203+
cyan : '\x1b[36m',
204+
white : '\x1b[37m',
205+
206+
brightBlack : '\x1b[90m',
207+
brightRed: '\x1b[91m',
208+
brightGreen: '\x1b[92m',
209+
brightYellow: '\x1b[93m',
210+
brightBlue: '\x1b[94m',
211+
brightMagenta: '\x1b[95m',
212+
brightCyan: '\x1b[96m',
213+
brightWhite: '\x1b[97m',
214+
215+
bgRed: '\x1b[41m',
216+
bgGreen: '\x1b[42m',
217+
bgYellow: '\x1b[43m',
218+
bgBlue: '\x1b[44m',
219+
bgMagenta: '\x1b[45m',
220+
bgCyan: '\x1b[46m',
221+
bgWhite: '\x1b[47m',
222+
223+
bgBrightRed : '\x1b[101m',
224+
bgBrightGreen : '\x1b[102m',
225+
bgBrightYellow : '\x1b[103m',
226+
bgBrightBlue : '\x1b[104m',
227+
bgBrightMagenta : '\x1b[105m',
228+
bgBrightCyan : '\x1b[106m',
229+
bgBrightWhite : '\x1b[107m',
230+
231+
bold : '\x1b[1m',
232+
dim : '\x1b[2m',
233+
italic : '\x1b[3m',
234+
underline : '\x1b[4m',
235+
inverse : '\x1b[7m',
236+
hidden : '\x1b[8m',
237+
strikethrough : '\x1b[9m',
238+
239+
gray : '\x1b[38;5;245m',
240+
241+
};
242+
243+
var chr = {
244+
warn : '\u26A0',
245+
cross : '\u274C',
246+
stop : '\u1F6D1',
247+
prohibited : '\u1F6AB',
248+
check : '\u2705',
249+
go : '\u1F7E2',
250+
thumb : '\u1F44D',
251+
ok : '\u1F197',
252+
};
253+
254+
255+
</script>
256+
257+
258+
<script type=module>
259+
console.clear();
260+
import {Terminal} from 'https://cdn.jsdelivr.net/npm/@xterm/xterm/+esm';
261+
import {FitAddon} from 'https://cdn.jsdelivr.net/npm/@xterm/addon-fit/+esm'
262+
import {WebContainer} from 'https://cdn.jsdelivr.net/npm/@webcontainer/api/+esm'
263+
264+
var term = new Terminal({
265+
266+
fontFamily : 'monospace',
267+
fontSize : 16,
268+
lineHeight : 1.0,
269+
270+
271+
theme : theme.light,
272+
rendererType : 'dom',
273+
274+
});
275+
var fitAddon = new FitAddon();
276+
term.loadAddon(fitAddon);
277+
term.open(terminal);
278+
fitAddon.fit();
279+
term.write('booting container ...\r\n')
280+
var webcontainer = await WebContainer.boot();
281+
term.write('spawn jsh ...\r\n')
282+
var shell = await webcontainer.spawn('jsh');
283+
var output = new WritableStream({write(data){term.write(data)}});
284+
shell.output.pipeTo(output);
285+
286+
var input = shell.input.getWriter();
287+
term.onData(data=>input.write(data));
288+
289+
term.focus();
290+
291+
</script>
292+
293+
</html>
294+

0 commit comments

Comments
 (0)