neo-builder
Version:
the fastest tiny script packager written in javascript and supporting iife dynamic chaining w/o extra runtime
112 lines (88 loc) • 3.28 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./build/builder.iife.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="tabs" style="height: 18em;">
<!-- <div id="content-1">
Содержимое 1...
</div>
<div id="content-2">
Содержимое 2...
</div>
<div id="content-3">
Содержимое 3...
</div> -->
<div class="tabs__links">
<!-- <a href="#content-1">Вкладка 1</a>
<a href="#content-2">Вкладка 2</a>
<a href="#content-3">Вкладка 3</a> -->
</div>
</div>
<button onclick="build()">build</button>
<button onclick="run()">run</button>
<textarea name="" id="target" rows="30" style="width: 100%;"></textarea>
<script>
//@ts-check
/// Tabs initialize:
const ext = '.ts'
const files = [
'index',
"nested_directory/common"
]
const store = {}
const tabsJags = document.querySelector('.tabs');
const tabHeaders = document.querySelector('.tabs__links');
let uploaded = 0;
/// Editors initialize:
const queries = files.map((file, i) => fetch('./tests/ts/source/' + file + ext).then(flow => flow.text()).then(code => {
const jag = tabsJags.appendChild(document.createElement('textarea'));
jag.rows = 15;
jag.value = code;
jag.id = 'content-' + i;
const header = tabHeaders.appendChild(document.createElement('a'));
header.href = '#content-' + i;
header.textContent = file + ext;
store[file] = code;
if ((uploaded += 1) === files.length){
document.location.hash = ''
document.location.hash = '#content-0';
}
}))
/// Onclick event:
tabHeaders.onclick = (e) => {
if (e.target.tagName == 'A'){
let active = tabHeaders.querySelector('.active')
if (active){
active.classList.remove('active')
}
e.target.classList.add('active')
}
}
function build() {
if (uploaded === files.length) {
//@ts-ignore
const r = builder.pack(store[files[0]], '', {
entryPoint: 'app.ts',
getContent: (filename) => {
return store[filename]
},
advanced:{
require: 'same as imports'
}
})
target.value = r;
}
}
function run(){
eval(target.value);
}
</script>
</body>
</html>