Skip to content

Commit bccbfc3

Browse files
javascript-2020javascript-2020
committed
save file
1 parent d6778f0 commit bccbfc3

1 file changed

Lines changed: 390 additions & 0 deletions

File tree

‎npm/babel-helpers-browser/scripts/babel-helpers-browser.html‎

Lines changed: 390 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,390 @@
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+
10+
#hdr
11+
{display:flex;gap:10px;align-items:center}
12+
13+
#terminal
14+
{height:500px}
15+
16+
input
17+
{font-size:16px;padding:5px 10px;box-sizing:border-box}
18+
input[type=button}
19+
{cursor:pointer}
20+
21+
22+
</style>
23+
24+
<h3 id=title></h3>
25+
26+
<div id=hdr>
27+
<div>
28+
auth
29+
</div>
30+
<input id=auth>
31+
<input value=ready type=button onclick='start()'>
32+
</div>
33+
34+
<div id=terminal></div>
35+
36+
37+
38+
39+
40+
<script>
41+
42+
var npm_package = '@babel/helpers';
43+
var my_package = 'babel-helpers';
44+
var export_name = 'helpers';
45+
46+
console.clear();
47+
console.log(my_package+'-browser');
48+
console.log();
49+
50+
var h3 = document.getElementById('title');
51+
h3.textContent = npm_package+' => '+my_package+'-browser';
52+
53+
54+
55+
var files = {};
56+
57+
58+
var filename = {
59+
esm : `${my_package}.m.js`,
60+
cjs : `${my_package}.js`,
61+
}
62+
63+
64+
files['entry.esm.js'] = `
65+
66+
import * as ns from '${npm_package}';
67+
// Build a mutable namespace object
68+
var ${export_name} = {
69+
...ns,
70+
// add alias
71+
${export_name} : ns.default,
72+
// preserve default
73+
};
74+
75+
export {${export_name}};
76+
export default ns.default;
77+
78+
`;
79+
80+
81+
files['rollup.config.esm.js'] = `
82+
83+
import resolve from '@rollup/plugin-node-resolve';
84+
import commonjs from '@rollup/plugin-commonjs';
85+
import json from '@rollup/plugin-json';
86+
import nodePolyfills from 'rollup-plugin-polyfill-node';
87+
88+
export default {
89+
input : 'entry.esm.js',
90+
output : {
91+
file : '${filename.esm}',
92+
format : 'es'
93+
},
94+
plugins : [
95+
commonjs(),
96+
json(),
97+
nodePolyfills(),
98+
resolve({preferBuiltins:false})
99+
]
100+
};
101+
102+
`;
103+
104+
105+
files['entry.cjs.js'] = `
106+
107+
import * as ns from '${npm_package}';
108+
// Build a mutable namespace object
109+
var ${export_name} = {
110+
...ns,
111+
// add alias
112+
${export_name} : ns.default,
113+
// preserve default
114+
};
115+
116+
export default ${export_name}; // iife / umd
117+
118+
`;
119+
120+
121+
files['rollup.config.cjs.js'] = `
122+
123+
import resolve from '@rollup/plugin-node-resolve';
124+
import commonjs from '@rollup/plugin-commonjs';
125+
import json from '@rollup/plugin-json';
126+
import nodePolyfills from 'rollup-plugin-polyfill-node';
127+
128+
export default {
129+
input : 'entry.cjs.js',
130+
output : {
131+
file : '${filename.cjs}',
132+
133+
format : 'iife', // or 'umd'
134+
name : '${export_name}', // This becomes window.espree
135+
exports : 'default',
136+
137+
},
138+
plugins : [
139+
commonjs(),
140+
json(),
141+
nodePolyfills(),
142+
resolve({preferBuiltins:false})
143+
]
144+
};
145+
146+
`;
147+
148+
149+
150+
151+
152+
153+
var term;
154+
var webcontainer;
155+
var rollup = {};
156+
157+
158+
159+
160+
161+
async function start(){
162+
163+
var {Terminal} = await import('https://cdn.jsdelivr.net/npm/@xterm/xterm/+esm');
164+
var {FitAddon} = await import('https://cdn.jsdelivr.net/npm/@xterm/addon-fit/+esm');
165+
166+
term = new Terminal();
167+
var fitAddon = new FitAddon();
168+
term.loadAddon(fitAddon);
169+
term.open(terminal);
170+
fitAddon.fit();
171+
172+
var {'file-server':fs} = await import('https://libs.ext-code.com/js/io/file-server/file-server.m.js');
173+
fs.url = 'https://localhost:3000';
174+
fs.auth = auth.value;
175+
176+
for(var key in files){
177+
178+
files[key] = {file:{contents:files[key]}};
179+
180+
}//for
181+
182+
183+
var {WebContainer} = await import('https://cdn.jsdelivr.net/npm/@webcontainer/api/+esm');
184+
185+
console.log('booting ...');
186+
webcontainer = await WebContainer.boot();
187+
188+
console.log('mounting file system ...');
189+
await webcontainer.mount(files);
190+
191+
await Promise.all([
192+
install(),
193+
install_rollup(),
194+
]);
195+
196+
await Promise.all(['esm','cjs'].map(async type=>{
197+
198+
await rollup[type]();
199+
200+
var uint8 = await webcontainer.fs.readFile(filename[type]);
201+
var blob = new Blob([uint8],{type:'text/javascript'});
202+
var url = window.URL.createObjectURL(blob);
203+
204+
205+
var path = `/npm/${my_package}-browser/`;
206+
fs.dir.create(path);
207+
208+
await fs.file.save(path+filename[type],blob);
209+
210+
}));
211+
212+
console.log('done.');
213+
214+
}//start
215+
216+
217+
218+
async function install(){
219+
console.log('npm install',npm_package,'...');
220+
var args = [npm_package];
221+
args.unshift('install');
222+
var process = await webcontainer.spawn('npm',args);
223+
var stream = new WritableStream({write(data){term.write(data)}});
224+
process.output.pipeTo(stream)
225+
var code = await process.exit;
226+
if(code!=0){
227+
console.log('an error occurred');
228+
}
229+
return code;
230+
231+
}//install
232+
233+
234+
async function install_rollup(){
235+
236+
var args = [
237+
'rollup',
238+
'@rollup/plugin-commonjs',
239+
'@rollup/plugin-node-resolve',
240+
'@rollup/plugin-json',
241+
'rollup-plugin-polyfill-node'
242+
];
243+
console.log('npm install',args.join(' '),'...');
244+
args.unshift('install');
245+
246+
var process = await webcontainer.spawn('npm',args);
247+
var stream = new WritableStream({write(data){term.write(data)}});
248+
process.output.pipeTo(stream)
249+
var code = await process.exit;
250+
if(code!=0){
251+
console.log('an error occurred');
252+
}
253+
return code;
254+
255+
}//install_rollup
256+
257+
258+
rollup.esm = async function(){
259+
console.log('perform rollup ...');
260+
var process = await webcontainer.spawn('npx',['-y','rollup','--config','rollup.config.esm.js']);
261+
262+
var stream = new WritableStream({write(data){term.write(data)}});
263+
process.output.pipeTo(stream);
264+
265+
var code = await process.exit;
266+
if(code!=0){
267+
console.log('an error occurred');
268+
}
269+
return code;
270+
271+
}//rollup
272+
273+
274+
rollup.cjs = async function(){
275+
console.log('perform rollup ...');
276+
var process = await webcontainer.spawn('npx',['-y','rollup','--config','rollup.config.cjs.js']);
277+
278+
var stream = new WritableStream({write(data){term.write(data)}});
279+
process.output.pipeTo(stream);
280+
281+
var code = await process.exit;
282+
if(code!=0){
283+
console.log('an error occurred');
284+
}
285+
return code;
286+
287+
}//rollup
288+
289+
290+
async function download(path1,path2){
291+
292+
var blob = await readfile(path);
293+
await fs.writeFile(path2,blob);
294+
295+
}//download
296+
297+
298+
async function readfile(path){
299+
300+
var uint8 = await webcontainer.fs.readFile(path);
301+
var blob = new Blob([uint8],{type:'text/javascript'});
302+
return blob;
303+
304+
}//readfile
305+
306+
307+
308+
//:
309+
310+
311+
async function test({espree,estraverse,scope}){
312+
313+
var code = `
314+
315+
function fn(){
316+
317+
console.log('123');
318+
319+
}//fn
320+
321+
`;
322+
323+
const options = {
324+
ecmaVersion: 2022,
325+
sourceType: "module",
326+
};
327+
328+
const ast = espree.parse(code, { range: true, ...options });
329+
const scopeManager = scope.analyze(ast, options);
330+
331+
var currentScope = scopeManager.acquire(ast); // global scope
332+
333+
estraverse.traverse(ast, {
334+
enter(node, parent) {
335+
// do stuff
336+
337+
if (/Function/.test(node.type)) {
338+
currentScope = scopeManager.acquire(node); // get current function scope
339+
}
340+
},
341+
leave(node, parent) {
342+
if (/Function/.test(node.type)) {
343+
currentScope = currentScope.upper; // set to parent scope
344+
}
345+
346+
// do stuff
347+
},
348+
});
349+
350+
}//test
351+
352+
353+
test.esm = async function(url){
354+
355+
var {espree} = await import('https://libs.ext-code.com/external/js/espree/espree.m.js');
356+
var {estraverse} = await import('https://libs.ext-code.com/external/js/estraverse/estraverse.m.js');
357+
var {scope} = await import(url);
358+
359+
test({espree,estraverse,scope});
360+
361+
}//test
362+
363+
364+
test.cjs = async function(url){
365+
}//cjs
366+
367+
368+
//:
369+
370+
371+
files['package.json'] = `
372+
373+
{
374+
"name": "node-test",
375+
"version": "1.0.0",
376+
"scripts": {}
377+
}
378+
379+
`;
380+
381+
382+
383+
384+
385+
386+
387+
</script>
388+
389+
390+

0 commit comments

Comments
 (0)