Skip to content

Commit 22558b0

Browse files
javascript-2020javascript-2020
committed
save file
1 parent cfe2724 commit 22558b0

File tree

1 file changed

+138
-126
lines changed

1 file changed

+138
-126
lines changed

‎blog/25-08-27/webcontainer-server/webcontainer-server.html‎

Lines changed: 138 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -5,139 +5,118 @@
55
cross-origin-isolate
66
-->
77

8-
<html>
98

9+
<!DOCTYPE html>
1010

11-
<head>
1211

12+
<html>
13+
14+
<head>
15+
<meta charset=utf-8>
1316

14-
<title>webcontainer server</title>
17+
<title>
18+
WebContainer Server
19+
</title>
1520

16-
<base href='https://javascript-2020.github.io/blog/25-08-27/webcontainer-server/webcontainer-server.html'>
21+
<meta name=description content='Learn how to set up a Node.js server inside a WebContainer—right in the browser. This hands-on guide includes editable, runnable demo code so you can experiment with server-side logic instantly, without installing anything locally.'>
22+
23+
<base href='https://ext-code.com/blog/25-08-27/webcontainer-server/'>
1724
<link rel=canonical href='https://ext-code.com/blog/25-08-27/webcontainer-server/webcontainer-server.html'>
1825

1926
<link rel=icon type='image/png' href='/blog/image/blog-30.png'>
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" : "TechArticle",
33+
"headline" : "WebContainer Server",
34+
"description" : "Learn how to set up a Node.js server inside a WebContainer—right in the browser. This hands-on guide includes editable, runnable demo code so you can experiment with server-side logic instantly, without installing anything locally.",
35+
"author" : {"@type":"Person","name":"Matthew Richards"},
36+
"datePublished" : "2025-08-27",
37+
"dateModified" : "2025-10-15",
38+
"mainEntityOfPage" : {"@type":"WebPage","@id":"https://ext-code.com/blog/25-08-27/webcontainer-server/webcontainer-server.html"},
39+
"publisher" : {"@type":"Organization","name":"ext-code.com","logo":{"@type":"ImageObject","url":"https://ext-code.com/favicon.ico"}},
40+
}
41+
</script>
42+
43+
44+
<script src='https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js'></script>
45+
46+
47+
<script src='https://libs.ext-code.com/js/dom/component/component.js'></script>
2048

2149

2250
<script init>
2351
console.clear();
52+
console.log('webcontainer-server.html');
53+
console.log();
2454
console.json=v=>console.log(JSON.stringify(v,null,4));
25-
var version = 'v1.0';
26-
27-
var df = true;
28-
55+
var df=true,version='v1.0'
56+
;
2957

58+
var ace;
59+
3060
var ext;
3161
var $;
3262
var datatype;
3363
var menumod;
34-
var code;
64+
var keydown;
65+
66+
var ex;
3567

36-
var mod = {};
68+
var log;
3769

38-
//var codeblock;
3970

4071

4172
//:
4273

4374

4475
async function init(){
45-
//debug('init',version);
76+
debug('init',version);
4677
menu = menumod();
47-
48-
await initdom(document.body);
49-
5078

51-
init.complete();
79+
80+
ex = mod.ex;
81+
log = mod.log;
82+
83+
ex.initmod({ext,$,menu,ace});
84+
log.initmod({ext,$});
85+
86+
87+
88+
await Promise.all([
89+
ex.init(),
90+
log.init(),
91+
]);
5292

53-
}//init
5493

94+
95+
initdom(document.body);
5596

56-
init.stack = [init];
57-
init.stack.ct = 0;
58-
init.stack.total = 1;
59-
init.stack.mode = '';
60-
init.stack.complete = false;
61-
Object.defineProperty(init.stack,'add',{get:()=>{
62-
init.stack.total++;
63-
if(init.stack.mode){
64-
console[init.stack.mode]('add',init.stack.ct,init.stack.total);
65-
//console.trace();
66-
}
67-
}});
68-
Object.defineProperty(init.stack,'complete',{get:()=>{
69-
init.stack.ct++;
70-
if(init.stack.mode){
71-
console[init.stack.mode]('complete',init.stack.ct,init.stack.total);
72-
//console.trace();
73-
}
74-
if(init.stack.ct>=init.stack.total){
75-
//console.log('*** complete');
76-
init.stack.ct = 0;
77-
init.stack.total = 0;
78-
var list = [...init.stack];
79-
init.stack.length = 0;
80-
list.forEach(fn=>fn());
81-
}
82-
}});
83-
84-
// (typeof init!='undefined' && init?.stack && init.stack.add)
85-
// (typeof init!='undefined' && init?.stack && init.stack.complete)
8697

87-
88-
init.complete = function(){
89-
90-
init.complete.stack.forEach(fn=>fn());
91-
92-
93-
}//complete
94-
95-
init.complete.stack = [];
96-
init.complete.add = fn=>init.complete.stack.push(fn);
98+
}//init
9799

98-
99100

101+
//:
102+
103+
100104
(async()=>{
101105

102-
init.stack.add;
103-
104-
105-
var url;
106-
var headers;
107-
var token = localStorage['github-token'];
108-
if(token){
109-
url = 'https://api.github.com/repos/javascript-2020/ext-code/contents/ext-loader.js';
110-
headers = {accept:'application/vnd.github.raw',authorization:`bearer ${token}`};
111-
}else{
112-
url = 'https://raw.githubusercontent.com/javascript-2020/ext-code/main/ext-loader.js';
113-
}
114-
115-
var res = await fetch(url,{headers});
116-
var txt = await res.text();
117-
118-
if(res.headers.get('content-type').includes('json')){
119-
console.log('*** ext : json');
120-
var json = JSON.parse(txt);
121-
var b64 = json.content;
122-
txt = atob(b64);
123-
}else{
124-
console.log('*** ext : text');
125-
}
126-
127-
ext = eval(txt);
128-
106+
mod.stack.add;
129107

108+
({ext} = await import('https://libs.ext-code.com/js/io/ext-loader/ext-loader.m.js'));
109+
130110
var promise = ext.load.libs(
131-
'js/dom/$.js.api',
111+
'js/dom/$.js',
132112
'js/core/datatype.js',
133113
'js/dom/menumod/menumod.js',
134-
'js/dom/code/code.js.api',
114+
'js/dom/keydown/keydown.js',
115+
'js/debug/debug.js',
135116
);
136-
[$,datatype,menumod,code] = await promise;
137-
138-
code.initmod({ext,$,datatype,menumod});
139-
140-
init.stack.complete;
117+
[$,datatype,menumod,keydown,debug] = await promise;
118+
119+
mod.stack.complete;
141120

142121
})();
143122

@@ -146,15 +125,53 @@
146125

147126

148127
<link rel=stylesheet href='/blog/css/blog.css'>
128+
149129
<style>
150130

151131
html
152-
{height:100%}
132+
{height:100%;font-family:arial}
153133
body
154-
{min-height:calc(100% - 40px);display:flex;flex-direction:column;gap:10px;margin:20px;
155-
font-family:arial
134+
{min-height:calc(100% - 40px);display:flex;flex-direction:column;gap:20px;margin:20px;align-items:center;
135+
padding-bottom:200px;
156136
}
157-
137+
body>*
138+
{max-width:1400px;width:100%}
139+
140+
[component]
141+
{display:none}
142+
143+
.description
144+
{max-width:1000px;text-align:justify;border-left:4px solid #4a90e2;padding:1rem 2rem;
145+
background-color:#f9f9f9;font-family:system-ui,sans-serif;font-size:1rem;line-height:1.6;color:#333}
146+
.description>p
147+
{margin:0}
148+
.description > p+p
149+
{margin:10px 0}
150+
151+
code
152+
{font-family:monospace;background:whitesmoke}
153+
code.inline
154+
{display:inline;padding:5px 10px}
155+
156+
a
157+
{color:#4a90e2;text-decoration:none;font-weight:500}
158+
a:hover
159+
{text-decoration:underline}
160+
.link-domain
161+
{font-size:0.85rem;color:#777;margin-left:0.25rem}
162+
.link-domain::before
163+
{content:'['}
164+
.link-domain::after
165+
{content:']'}
166+
.link-txt
167+
{}
168+
169+
input
170+
{font-size:16px;padding:5px 7px;box-sizing:border-box;}
171+
input[type=button]
172+
{cursor:pointer}
173+
174+
158175
</style>
159176

160177

@@ -164,61 +181,56 @@
164181

165182
<body>
166183

184+
<blog-hdr component=grp1 v2.0>
185+
<h1 class=title>
186+
WebContainer Server
187+
</h1>
188+
<time slot=date datetime=2025-10-29>
189+
29 Oct 2025
190+
</time>
191+
</blog-hdr>
167192

168-
169-
<h3>
170-
webcontainer server
171-
</h3>
172193

194+
<div class=description>
173195

174-
<div id=desc>
175-
176-
webcontainer server
177-
196+
<p>
197+
Learn how to set up a Node.js server inside a WebContainer—right in the browser.
198+
This hands-on guide includes editable, runnable demo code so you can experiment with server-side logic instantly, without installing anything locally.
199+
</p>
200+
178201
</div>
202+
203+
<snippet-html-console id=ex component v2.0 src='ex/ex.html' api></snippet-html-console>
179204

180-
181-
<code-block snippet-html src='ex.html' api></code-block>
182205

206+
<log component v2.0></log>
207+
183208

184209
</body>
185210

186211

187212
<script>
188213

189214

190-
var code_block;
191-
192-
var menu;
193-
194215
var root;
195216

196217

197-
198-
async function initdom(rootnode){
218+
//:
219+
220+
221+
function initdom(rootnode){
199222

200223
root = rootnode;
201224

202225

203-
204-
var node = $(root,'code-block');
205-
({code_block} = await code.code_block(node,{menu}));
206-
207-
208-
209-
//test();
210-
211-
212-
226+
ex.initdom();
227+
228+
213229

214230
}//initdom
215231

216-
217-
//:
218232

219233

220-
init.stack.complete;
221-
222234
</script>
223235

224236
</html>

0 commit comments

Comments
 (0)