mirror of
https://gitlab.com/SpaccInc/SpaccDotWeb.git
synced 2025-04-24 14:18:48 +02:00
63 lines
2.1 KiB
HTML
63 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf8" />
|
|
<style> textarea { width: 100% !important; height: 8rem; min-height: 2em; box-sizing: border-box; } </style>
|
|
<script src="../Build/SpaccDotWeb.Build.bundle.min.js" data-SpaccDotWeb='{"compile":false,"minify":false}'></script>
|
|
|
|
<fieldset class="script">
|
|
<legend>Script</legend>
|
|
<textarea id="script" readonly="true">
|
|
const alerter = (text) => alert(`THIS IS AN ALERT ❗️\n\n${text}`);
|
|
alerter("It's a nice day today, innit?");
|
|
</textarea>
|
|
<span>ES6</span>
|
|
</fieldset>
|
|
|
|
<fieldset class="script">
|
|
<legend>Compiled</legend>
|
|
<textarea id="compiled" readonly="true"></textarea>
|
|
<span>ES5</span>
|
|
</fieldset>
|
|
|
|
<fieldset class="script">
|
|
<legend>Compiled+Minified</legend>
|
|
<textarea id="minified" readonly="true"></textarea>
|
|
<span>ES5</span>
|
|
</fieldset>
|
|
|
|
<fieldset class="html">
|
|
<legend>HTML</legend>
|
|
<textarea id="html" readonly="true"></textarea>
|
|
<span>ES5, Compiled+Minified</span>
|
|
</fieldset>
|
|
|
|
<script>
|
|
const Build = window.SpaccDotWeb.Build;
|
|
const $ = (id) => document.getElementById(id);
|
|
const createElement = (tag, attrs) => Object.assign(document.createElement(tag), attrs);
|
|
|
|
// Get the sample script
|
|
const scriptText = $('script').textContent = $('script').textContent.trimEnd();
|
|
|
|
// Actually build the script
|
|
const builtScript = Build.BuildScript(scriptText);
|
|
|
|
// Show the build result
|
|
$('compiled').textContent = builtScript.compiled;
|
|
$('minified').textContent = builtScript.minified;
|
|
|
|
setTimeout(function(){
|
|
Build.BuildHtml(document.documentElement.outerHTML, {}).then(html => {
|
|
$('html').textContent = html;
|
|
document.querySelector('fieldset.html > span').innerHTML += `, ${html.length}b`;
|
|
});
|
|
}, 1);
|
|
|
|
document.querySelectorAll('fieldset.script').forEach(fieldset => {
|
|
const script = fieldset.querySelector('textarea').textContent;
|
|
fieldset.querySelector('span').innerHTML += `, ${script.length}b`;
|
|
fieldset.appendChild(createElement('button', {
|
|
innerHTML: "Execute",
|
|
onclick: () => eval(script),
|
|
}));
|
|
});
|
|
</script> |