Skip to content

Commit 7d451a1

Browse files
save file
1 parent 58e0165 commit 7d451a1

1 file changed

Lines changed: 279 additions & 0 deletions

File tree

Lines changed: 279 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,279 @@
1+
2+
<link rel=stylesheet href='https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css'>
3+
4+
<style>
5+
6+
body
7+
{margin:20px;display:flex;flex-direction:column;gap:10px;font-family:arial}
8+
9+
iframe
10+
{width:100%;height:300px}
11+
12+
#terminal
13+
{height:500px}
14+
15+
</style>
16+
17+
<h3>rollup example</h3>
18+
19+
<iframe id=iframe></iframe>
20+
21+
<div id=terminal></div>
22+
23+
24+
<script>
25+
26+
(()=>{
27+
28+
var term;
29+
var webcontainer;
30+
var files = {};
31+
32+
33+
var packages = ['acorn'];
34+
var filename = 'acorn.js';
35+
36+
37+
38+
39+
40+
async function setup(){
41+
42+
var {Terminal} = await import('https://cdn.jsdelivr.net/npm/@xterm/xterm/+esm');
43+
var {FitAddon} = await import('https://cdn.jsdelivr.net/npm/@xterm/addon-fit/+esm');
44+
45+
term = new Terminal();
46+
var fitAddon = new FitAddon();
47+
term.loadAddon(fitAddon);
48+
term.open(terminal);
49+
fitAddon.fit();
50+
console.clear();
51+
console.log('rollup example');
52+
console.log();
53+
}//setup
54+
55+
56+
setTimeout(start,50);
57+
58+
59+
async function start(){
60+
61+
await setup();
62+
63+
64+
for(var key in files){
65+
66+
files[key] = {file:{contents:files[key]}};
67+
68+
}//for
69+
70+
71+
console.log('download ...');
72+
var {WebContainer} = await import('https://cdn.jsdelivr.net/npm/@webcontainer/api/+esm');
73+
74+
console.log('booting ...');
75+
webcontainer = await WebContainer.boot();
76+
77+
console.log('mounting file system ...');
78+
await webcontainer.mount(files);
79+
80+
81+
await install();
82+
await package_json();
83+
await install_rollup();
84+
85+
86+
await rollup();
87+
88+
var uint8 = await webcontainer.fs.readFile(filename);
89+
var blob = new Blob([uint8],{type:'text/javascript'});
90+
var url = window.URL.createObjectURL(blob);
91+
92+
93+
if(1){
94+
console.log('download...');
95+
var a = document.createElement('a');
96+
a.href = url;
97+
a.download = filename;
98+
document.body.append(a);
99+
a.click();
100+
console.log('done');
101+
return;
102+
}
103+
104+
var {acorn} = await import(url);
105+
106+
var code = `
107+
108+
function fn(){
109+
110+
console.log('123');
111+
112+
}//fn
113+
114+
`;
115+
116+
var ast = acorn.parse(code);
117+
console.log(ast);
118+
119+
120+
121+
/*
122+
estraverse.traverse(ast, {
123+
enter(node) {
124+
if (node.type === 'FunctionDeclaration') {
125+
console.log('FunctionDeclaration:', node.id.name);
126+
}
127+
128+
if (
129+
node.type === 'VariableDeclarator' &&
130+
node.init &&
131+
(node.init.type === 'ArrowFunctionExpression' ||
132+
node.init.type === 'FunctionExpression')
133+
) {
134+
console.log('Function assigned to variable:', node.id.name);
135+
}
136+
}
137+
});
138+
*/
139+
140+
141+
142+
console.log('done.');
143+
144+
145+
async function install(){
146+
var str = packages.join(' ');
147+
console.log('npm install',str,'...');
148+
packages.unshift('install');
149+
var process = await webcontainer.spawn('npm',packages);
150+
var stream = new WritableStream({write(data){term.write(data)}});
151+
process.output.pipeTo(stream)
152+
var code = await process.exit;
153+
if(code!=0){
154+
console.log('an error occurred');
155+
}
156+
return code;
157+
158+
}//install
159+
160+
161+
async function package_json(){
162+
console.log('npm install ( package.json ) ...');
163+
var process = await webcontainer.spawn('npm',['install']);
164+
var stream = new WritableStream({write(data){term.write(data)}});
165+
process.output.pipeTo(stream)
166+
var code = await process.exit;
167+
if(code!=0){
168+
console.log('an error occurred');
169+
}
170+
return code;
171+
172+
}//package_json
173+
174+
175+
async function install_rollup(){
176+
177+
var packages = [
178+
'rollup',
179+
'@rollup/plugin-commonjs',
180+
'@rollup/plugin-node-resolve',
181+
'@rollup/plugin-json',
182+
'rollup-plugin-polyfill-node'
183+
];
184+
console.log('npm install',packages.join(' '),'...');
185+
packages.unshift('install');
186+
187+
var process = await webcontainer.spawn('npm',packages);
188+
var stream = new WritableStream({write(data){term.write(data)}});
189+
process.output.pipeTo(stream)
190+
var code = await process.exit;
191+
if(code!=0){
192+
console.log('an error occurred');
193+
}
194+
return code;
195+
196+
}//install_rollup
197+
198+
199+
async function rollup(){
200+
console.log('perform rollup ...');
201+
var process = await webcontainer.spawn('npx',['-y','rollup','--config','rollup.config.js']);
202+
203+
var stream = new WritableStream({write(data){term.write(data)}});
204+
process.output.pipeTo(stream);
205+
206+
var code = await process.exit;
207+
if(code!=0){
208+
console.log('an error occurred');
209+
}
210+
return code;
211+
212+
}//rollup
213+
214+
215+
}//start
216+
217+
218+
//:
219+
220+
221+
files['entry.js'] = `
222+
223+
import * as acorn from 'acorn';
224+
//export {acorn};
225+
226+
export default espree; // iife / umd
227+
228+
`;
229+
230+
231+
files['package.json'] = `
232+
233+
{
234+
"name": "node-test",
235+
"version": "1.0.0",
236+
"scripts": {}
237+
}
238+
239+
`;
240+
241+
242+
files['rollup.config.js'] = `
243+
244+
import resolve from '@rollup/plugin-node-resolve';
245+
import commonjs from '@rollup/plugin-commonjs';
246+
import json from '@rollup/plugin-json';
247+
import nodePolyfills from 'rollup-plugin-polyfill-node';
248+
249+
export default {
250+
input : 'entry.js',
251+
output : {
252+
file : '${filename}',
253+
//format : 'es'
254+
255+
format : 'iife', // or 'umd'
256+
name : 'espree', // This becomes window.espree
257+
exports : 'default',
258+
259+
},
260+
plugins : [
261+
commonjs(),
262+
json(),
263+
nodePolyfills(),
264+
resolve({preferBuiltins:false})
265+
]
266+
};
267+
268+
`;
269+
270+
271+
272+
273+
})();
274+
275+
276+
</script>
277+
278+
279+

0 commit comments

Comments
 (0)