Skip to content

Commit e741847

Browse files
javascript-2020javascript-2020
committed
save file
1 parent bba81bf commit e741847

1 file changed

Lines changed: 374 additions & 0 deletions

File tree

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

Lines changed: 374 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,374 @@
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/generator';
43+
var my_package = 'babel-generator';
44+
var export_name = 'generator';
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 ${export_name} from '${npm_package}';
67+
export {${export_name}};
68+
69+
`;
70+
71+
72+
files['rollup.config.esm.js'] = `
73+
74+
import resolve from '@rollup/plugin-node-resolve';
75+
import commonjs from '@rollup/plugin-commonjs';
76+
import json from '@rollup/plugin-json';
77+
import nodePolyfills from 'rollup-plugin-polyfill-node';
78+
79+
export default {
80+
input : 'entry.esm.js',
81+
output : {
82+
file : '${filename.esm}',
83+
format : 'es'
84+
},
85+
plugins : [
86+
commonjs(),
87+
json(),
88+
nodePolyfills(),
89+
resolve({preferBuiltins:false})
90+
]
91+
};
92+
93+
`;
94+
95+
96+
files['entry.cjs.js'] = `
97+
98+
import * as ${export_name} from '${npm_package}';
99+
100+
export default ${export_name}; // iife / umd
101+
102+
`;
103+
104+
105+
files['rollup.config.cjs.js'] = `
106+
107+
import resolve from '@rollup/plugin-node-resolve';
108+
import commonjs from '@rollup/plugin-commonjs';
109+
import json from '@rollup/plugin-json';
110+
import nodePolyfills from 'rollup-plugin-polyfill-node';
111+
112+
export default {
113+
input : 'entry.cjs.js',
114+
output : {
115+
file : '${filename.cjs}',
116+
117+
format : 'iife', // or 'umd'
118+
name : '${export_name}', // This becomes window.espree
119+
exports : 'default',
120+
121+
},
122+
plugins : [
123+
commonjs(),
124+
json(),
125+
nodePolyfills(),
126+
resolve({preferBuiltins:false})
127+
]
128+
};
129+
130+
`;
131+
132+
133+
134+
135+
136+
137+
var term;
138+
var webcontainer;
139+
var rollup = {};
140+
141+
142+
143+
144+
145+
async function start(){
146+
147+
var {Terminal} = await import('https://cdn.jsdelivr.net/npm/@xterm/xterm/+esm');
148+
var {FitAddon} = await import('https://cdn.jsdelivr.net/npm/@xterm/addon-fit/+esm');
149+
150+
term = new Terminal();
151+
var fitAddon = new FitAddon();
152+
term.loadAddon(fitAddon);
153+
term.open(terminal);
154+
fitAddon.fit();
155+
156+
var {'file-server':fs} = await import('https://libs.ext-code.com/js/io/file-server/file-server.m.js');
157+
fs.url = 'https://localhost:3000';
158+
fs.auth = auth.value;
159+
160+
for(var key in files){
161+
162+
files[key] = {file:{contents:files[key]}};
163+
164+
}//for
165+
166+
167+
var {WebContainer} = await import('https://cdn.jsdelivr.net/npm/@webcontainer/api/+esm');
168+
169+
console.log('booting ...');
170+
webcontainer = await WebContainer.boot();
171+
172+
console.log('mounting file system ...');
173+
await webcontainer.mount(files);
174+
175+
await Promise.all([
176+
install(),
177+
install_rollup(),
178+
]);
179+
180+
await Promise.all(['esm','cjs'].map(async type=>{
181+
182+
await rollup[type]();
183+
184+
var uint8 = await webcontainer.fs.readFile(filename[type]);
185+
var blob = new Blob([uint8],{type:'text/javascript'});
186+
var url = window.URL.createObjectURL(blob);
187+
188+
189+
var path = `/npm/${my_package}-browser/`;
190+
fs.dir.create(path);
191+
192+
await fs.file.save(path+filename[type],blob);
193+
194+
}));
195+
196+
console.log('done.');
197+
198+
}//start
199+
200+
201+
202+
async function install(){
203+
console.log('npm install',npm_package,'...');
204+
var args = [npm_package];
205+
args.unshift('install');
206+
var process = await webcontainer.spawn('npm',args);
207+
var stream = new WritableStream({write(data){term.write(data)}});
208+
process.output.pipeTo(stream)
209+
var code = await process.exit;
210+
if(code!=0){
211+
console.log('an error occurred');
212+
}
213+
return code;
214+
215+
}//install
216+
217+
218+
async function install_rollup(){
219+
220+
var args = [
221+
'rollup',
222+
'@rollup/plugin-commonjs',
223+
'@rollup/plugin-node-resolve',
224+
'@rollup/plugin-json',
225+
'rollup-plugin-polyfill-node'
226+
];
227+
console.log('npm install',args.join(' '),'...');
228+
args.unshift('install');
229+
230+
var process = await webcontainer.spawn('npm',args);
231+
var stream = new WritableStream({write(data){term.write(data)}});
232+
process.output.pipeTo(stream)
233+
var code = await process.exit;
234+
if(code!=0){
235+
console.log('an error occurred');
236+
}
237+
return code;
238+
239+
}//install_rollup
240+
241+
242+
rollup.esm = async function(){
243+
console.log('perform rollup ...');
244+
var process = await webcontainer.spawn('npx',['-y','rollup','--config','rollup.config.esm.js']);
245+
246+
var stream = new WritableStream({write(data){term.write(data)}});
247+
process.output.pipeTo(stream);
248+
249+
var code = await process.exit;
250+
if(code!=0){
251+
console.log('an error occurred');
252+
}
253+
return code;
254+
255+
}//rollup
256+
257+
258+
rollup.cjs = async function(){
259+
console.log('perform rollup ...');
260+
var process = await webcontainer.spawn('npx',['-y','rollup','--config','rollup.config.cjs.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+
async function download(path1,path2){
275+
276+
var blob = await readfile(path);
277+
await fs.writeFile(path2,blob);
278+
279+
}//download
280+
281+
282+
async function readfile(path){
283+
284+
var uint8 = await webcontainer.fs.readFile(path);
285+
var blob = new Blob([uint8],{type:'text/javascript'});
286+
return blob;
287+
288+
}//readfile
289+
290+
291+
292+
//:
293+
294+
295+
async function test({espree,estraverse,scope}){
296+
297+
var code = `
298+
299+
function fn(){
300+
301+
console.log('123');
302+
303+
}//fn
304+
305+
`;
306+
307+
const options = {
308+
ecmaVersion: 2022,
309+
sourceType: "module",
310+
};
311+
312+
const ast = espree.parse(code, { range: true, ...options });
313+
const scopeManager = scope.analyze(ast, options);
314+
315+
var currentScope = scopeManager.acquire(ast); // global scope
316+
317+
estraverse.traverse(ast, {
318+
enter(node, parent) {
319+
// do stuff
320+
321+
if (/Function/.test(node.type)) {
322+
currentScope = scopeManager.acquire(node); // get current function scope
323+
}
324+
},
325+
leave(node, parent) {
326+
if (/Function/.test(node.type)) {
327+
currentScope = currentScope.upper; // set to parent scope
328+
}
329+
330+
// do stuff
331+
},
332+
});
333+
334+
}//test
335+
336+
337+
test.esm = async function(url){
338+
339+
var {espree} = await import('https://libs.ext-code.com/external/js/espree/espree.m.js');
340+
var {estraverse} = await import('https://libs.ext-code.com/external/js/estraverse/estraverse.m.js');
341+
var {scope} = await import(url);
342+
343+
test({espree,estraverse,scope});
344+
345+
}//test
346+
347+
348+
test.cjs = async function(url){
349+
}//cjs
350+
351+
352+
//:
353+
354+
355+
files['package.json'] = `
356+
357+
{
358+
"name": "node-test",
359+
"version": "1.0.0",
360+
"scripts": {}
361+
}
362+
363+
`;
364+
365+
366+
367+
368+
369+
370+
371+
</script>
372+
373+
374+

0 commit comments

Comments
 (0)