Skip to content

Commit 55050c8

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 5f2982e commit 55050c8

File tree

1 file changed

+60
-127
lines changed

1 file changed

+60
-127
lines changed

‎blog/25-08-31/simple-browser-rollup-example/simple-browser-rollup-example.html‎

Lines changed: 60 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,23 @@
1010

1111
<title>simple browser rollup example</title>
1212

13-
<base href='https://javascript-2020.github.io/blog/23-07-25/'>
14-
<link rel=canonical href='https://ext-code.com/blog/'>
13+
<base href='https://ext-code.com/blog/25-08-31/simple-browser-rollup-example/'>
14+
15+
<link rel=canonical href='https://ext-code.com/blog/25-08-31/simple-browser-rollup-example'>
1516

1617
<meta name=viewport content='width=device-width, initial-scale=1'>
1718
<link rel=icon type='image/png' href='/blog/image/blog-30.png'>
1819

20+
1921
<script src='https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js'></script>
2022

21-
23+
24+
<script src='https://libs.ext-code.com/js/dom/component/component.js'></script>
25+
2226
<script init>
2327
console.clear();
28+
console.log('simple-browser-rollup-example.html');
29+
console.log();
2430
console.json=v=>console.log(JSON.stringify(v,null,4));
2531
var version = 'v1.0';
2632

@@ -32,11 +38,11 @@
3238
var datatype;
3339
var menumod;
3440
var code;
41+
var debug;
3542

36-
var mod = {};
37-
38-
//var codeblock;
3943

44+
var rollup;
45+
var test;
4046

4147
//:
4248

@@ -46,118 +52,66 @@
4652

4753
menu = menumod();
4854

55+
rollup = mod.rollup;
56+
test = mod.test;
57+
58+
rollup.initmod({ext,$,ace,menu});
59+
test.initmod({ext,$,ace,menu});
4960

50-
code.initmod({ext,$,datatype,menumod});
61+
await Promise.all([
62+
rollup.init(),
63+
test.init(),
64+
]);
5165

5266

5367
await initdom(document.body);
5468

5569

56-
init.complete();
57-
5870
}//init
5971

6072

61-
init.stack = [init];
62-
init.stack.ct = 0;
63-
init.stack.total = 1;
64-
init.stack.mode = '';
65-
init.stack.complete = false;
66-
Object.defineProperty(init.stack,'add',{get:()=>{
67-
init.stack.total++;
68-
if(init.stack.mode){
69-
console[init.stack.mode]('add',init.stack.ct,init.stack.total);
70-
//console.trace();
71-
}
72-
}});
73-
Object.defineProperty(init.stack,'complete',{get:()=>{
74-
init.stack.ct++;
75-
if(init.stack.mode){
76-
console[init.stack.mode]('complete',init.stack.ct,init.stack.total);
77-
//console.trace();
78-
}
79-
if(init.stack.ct>=init.stack.total){
80-
//console.log('*** complete');
81-
init.stack.ct = 0;
82-
init.stack.total = 0;
83-
var list = [...init.stack];
84-
init.stack.length = 0;
85-
list.forEach(fn=>fn());
86-
}
87-
}});
88-
89-
// (typeof init!='undefined' && init?.stack && init.stack.add)
90-
// (typeof init!='undefined' && init?.stack && init.stack.complete)
91-
92-
93-
init.complete = function(){
94-
95-
init.complete.stack.forEach(fn=>fn());
96-
97-
98-
}//complete
99-
100-
init.complete.stack = [];
101-
init.complete.add = fn=>init.complete.stack.push(fn);
102-
103-
104-
105-
(async()=>{
73+
//:
10674

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

78+
mod.stack.add;
13479

80+
({ext} = await import('https://libs.ext-code.com/js/io/ext-loader/ext-loader.m.js'));
81+
13582
var promise = ext.load.libs(
136-
'js/dom/$.js.api',
83+
'js/dom/$.js',
13784
'js/core/datatype.js',
13885
'js/dom/menumod/menumod.js',
139-
'js/dom/code/code.js.api',
86+
'js/dom/keydown/keydown.js',
87+
'js/dom/code/v2.0/code-v2.0.js.api',
88+
'js/debug/debug.js',
14089
);
141-
[$,datatype,menumod,code] = await promise;
142-
90+
[$,datatype,menumod,keydown,code] = await promise;
91+
92+
code.initmod({ext,$,datatype,menumod});
14393

144-
init.stack.complete;
145-
94+
mod.stack.complete;
95+
14696
})();
14797

148-
98+
14999
</script init>
150100

151101

152102
<link rel=stylesheet href='/blog/css/blog.css'>
103+
153104
<style>
154105

155106
html
156-
{}
107+
{height:100%;font-family:arial}
157108
body
158-
{min-height:calc(100% - 40px);display:flex;flex-direction:column;gap:10px;margin:20px;
159-
font-family:arial
109+
{min-height:calc(100% - 40px);display:flex;flex-direction:column;gap:10px;margin:20px;align-items:center;
110+
padding-bottom:200px;
160111
}
112+
body>*
113+
{max-width:1400px;width:100%;padding:0 20px;}
114+
161115

162116
</style>
163117

@@ -168,29 +122,34 @@
168122
<body>
169123

170124

171-
172-
<h3>
173-
simple browser rollup example
174-
</h3>
125+
<blog-hdr component=grp1 v2.0>
126+
<h1 class=title>
127+
simple browser rollup example
128+
</h1>
129+
<div slot=date>
130+
14 Oct 2025
131+
</div>
132+
</blog-hdr>
175133

176134

135+
177136
<div id=description>
178137

179-
demonstrates how to use rollup in a browser to rollup nodejs libraries for client side use
138+
demonstrates how to use rollup in a browser to rollup nodejs libraries for client side use
180139

181140
</div>
182141

183-
<code-block snippet-html src='webcontainer-rollup.html' api></code-block>
142+
<snippet-html-console id=rollup component v2.0 src='webcontainer-rollup.html'></snippet-html-console>
184143

185144

186145
<div>
187146

188-
and the test code
147+
and the test code
189148

190149
</div>
191150

192151

193-
<code-block src='test.html'></code-block>
152+
<snippet-html-console id=test component v2.0 src='test.html'></snippet-html-console>
194153

195154

196155

@@ -202,46 +161,20 @@ <h3>
202161
<script>
203162

204163

205-
var code_block;
206-
207-
var menu;
208-
209-
var root;
210-
211164

212165

213166
async function initdom(rootnode){
214167

215-
root = rootnode;
216-
217-
218-
219-
var list = $.all(root,'code-block');
220-
list.forEach(async node=>{
168+
var root = rootnode;
221169

222-
({code_block} = await code.code_block(node,{menu,ace}));
223-
224-
if(code_block.snippet_console){
225-
code_block.snippet_console.snippet.dconsole.height('200px');
226-
}
227-
228-
});
229-
230-
231170

232-
//test();
171+
rollup.initdom();
172+
test.initdom();
233173

234174

235-
236-
237175
}//initdom
238176

239177

240-
//:
241-
242-
243-
init.stack.complete;
244-
245178
</script>
246179

247180

0 commit comments

Comments
 (0)