Skip to content

Commit 966888d

Browse files
javascript-2020javascript-2020
committed
save file
1 parent a6cf276 commit 966888d

File tree

1 file changed

+61
-119
lines changed

1 file changed

+61
-119
lines changed

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

Lines changed: 61 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@
88
<!DOCTYPE html>
99

1010

11-
<html>
11+
<html lang=en>
1212

1313
<head>
1414
<meta charset=UTF-8>
15-
15+
1616
<title>
1717
simple browser rollup example
1818
</title>
@@ -21,10 +21,10 @@
2121

2222
<base href='https://ext-code.com/blog/25-08-31/simple-browser-rollup-example/'>
2323
<link rel=canonical href='https://ext-code.com/blog/25-08-31/simple-browser-rollup-example/simple-browser-rollup-example.html'>
24-
24+
2525
<link rel=icon type='image/png' href='/blog/image/blog-30.png'>
2626
<meta name=viewport content='width=device-width, initial-scale=1'>
27-
27+
2828
<script type='application/ld+json'>
2929
{
3030
"@context" : "https://schema.org",
@@ -38,96 +38,46 @@
3838
"publisher" : {"@type":"Organization","name":"ext-code.com","logo":{"@type":"ImageObject","url":"https://ext-code.com/favicon.ico"}},
3939
}
4040
</script>
41-
42-
41+
42+
4343
<script src='https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js'></script>
44-
45-
46-
<script src='https://libs.ext-code.com/js/dom/component/component.js'></script>
47-
48-
<script init>
49-
console.clear();
44+
45+
46+
<script src='https://libs.ext-code.com/js/dom/component/v2.0/component.js?hdr'></script>
47+
48+
<script>
5049
console.log('simple-browser-rollup-example.html');
51-
console.log();
52-
console.json=v=>console.log(JSON.stringify(v,null,4));
53-
var df=true,version='v1.0'
54-
;
55-
50+
51+
var df=true,did='html';
52+
5653
var ace;
57-
58-
var ext;
59-
var $;
60-
var datatype;
61-
var menumod;
62-
var keydown;
63-
var debug;
6454

6555
var hdr;
6656
var rollup;
6757
var test;
6858
var log;
69-
70-
59+
60+
7161
//:
72-
73-
62+
63+
7464
async function init(){
7565
//debug('init',version);
76-
77-
menu = menumod();
78-
79-
mod.base.add({ext,$,datatype,keydown,menu,menumod,ace});
80-
81-
82-
hdr = mod['blog-hdr'];
83-
rollup = mod.rollup;
84-
test = mod.test;
66+
67+
hdr = mod['blog-hdr'];
8568
log = mod['log-mod'];
8669

87-
hdr.initmod({ext,$});
88-
rollup.initmod({ext,$,ace,menu});
89-
test.initmod({ext,$,ace,menu});
90-
log.initmod({ext,$});
91-
92-
await Promise.all([
93-
hdr.init(),
94-
rollup.init(),
95-
test.init(),
96-
log.init(),
97-
]);
70+
await mod.auto();
9871

9972

10073
initdom(document.body);
101-
102-
74+
75+
10376
}//init
104-
105-
106-
//:
107-
108-
109-
(async()=>{
110-
111-
mod.stack.add;
11277

113-
({ext} = await import('https://libs.ext-code.com/js/io/ext-loader/ext-loader.m.js'));
114-
115-
var promise = ext.load.libs(
116-
'js/dom/$.js',
117-
'js/core/datatype.js',
118-
'js/dom/menumod/menumod.js',
119-
'js/dom/keydown/keydown.js',
120-
'js/debug/debug.js',
121-
);
122-
[$,datatype,menumod,keydown,code] = await promise;
123-
124-
mod.stack.complete;
125-
126-
})();
127-
128-
129-
</script init>
130-
78+
79+
</script>
80+
13181

13282
<link rel=stylesheet href='/blog/css/blog.css'>
13383

@@ -145,72 +95,72 @@
14595
[component]
14696
{display:none}
14797

148-
.description
98+
.description
14999
{max-width:1000px;text-align:justify;border-left:4px solid #4a90e2;padding:1rem 2rem;
150100
background-color:#f9f9f9;font-family:system-ui,sans-serif;font-size:1rem;line-height:1.6;color:#333}
151101
.description>p
152102
{margin:0}
153103
.description > p+p
154104
{margin:10px 0}
155-
105+
156106
code
157107
{font-family:monospace;background:whitesmoke}
158108
code.inline
159109
{display:inline;padding:5px 10px}
160-
110+
161111
a
162112
{color:#4a90e2;text-decoration:none;font-weight:500}
163-
a:hover
113+
a:hover
164114
{text-decoration:underline}
165115
.link-domain
166116
{font-size:0.85rem;color:#777;margin-left:0.25rem}
167-
.link-domain::before
117+
.link-domain::before
168118
{content:'['}
169119
.link-domain::after
170120
{content:']'}
171121
.link-txt
172122
{}
173-
123+
174124
input
175125
{font-size:16px;padding:5px 7px;box-sizing:border-box;}
176126
input[type=button]
177127
{cursor:pointer}
178-
179-
180-
181-
128+
129+
130+
131+
182132
#rollup
183133
{margin-bottom:100px}
184134

185-
135+
186136
a.link-stable
187137
{color:blue}
188138
.link-domain
189139
{font-size:12px}
190140
.link-txt
191141
{}
192-
142+
193143

194144
</style>
195145

196146
</head>
197147

198148

199149
<body>
200-
201-
202-
<blog-hdr component=grp1>
150+
151+
152+
<blog-hdr component=grp1>
203153
<h1 class=title>
204154
simple browser rollup example
205155
</h1>
206156
<time slot=date datetime=2025-10-29>
207157
29 Oct 2025
208158
</time>
209159
</blog-hdr>
210-
211-
160+
161+
212162
<div class=description>
213-
163+
214164
<p>
215165
Learn how to use Rollup directly in the browser with a live tool and example.
216166
Bundle JavaScript modules client-side without installing anything.
@@ -226,51 +176,43 @@ <h1 class=title>
226176

227177
in a browser to rollup nodejs libraries for client side use
228178
</p>
229-
179+
230180
</div>
231-
232-
181+
182+
233183
<snippet-html-console id=rollup src='ex/webcontainer-rollup.html' component></snippet-html-console>
234-
235-
184+
185+
236186
<div>
237187
if you download the espree.m.js code and host it on a local server, you can use the following the code to test it
238188
</div>
239-
189+
240190

241191
<snippet-html-console id=test src='ex/test.html' component></snippet-html-console>
242-
243-
192+
193+
244194
<log-mod component></log-mod>
245195

246196

247197
</body>
248-
249-
198+
199+
250200
<script>
251-
252-
201+
202+
253203
//:
254204

255205

256206
async function initdom(rootnode){
257-
207+
258208
var root = rootnode;
259-
260-
261-
hdr.init();
262209

263-
rollup.initdom();
264-
test.initdom();
265-
266-
log.initdom();
267-
268210

269-
}//initdom
270-
271-
211+
}//initdom
212+
213+
272214
</script>
273-
215+
274216
</html>
275217

276218

0 commit comments

Comments
 (0)