Split the fiddle JS code into separate pre-/post-init files to simplify editing. emcc will combine these into the final fiddle.js, so the number of output deliverables does not change.
FossilOrigin-Name: d3d8ea011868bcfa11bb3fe2db78eea6e77ac1005534d9c091f9a81e03f0a7e6
This commit is contained in:
+4
-1
@@ -1535,7 +1535,10 @@ emcc_flags = $(emcc_opt) \
|
||||
-sEXPORTED_RUNTIME_METHODS=ccall,cwrap \
|
||||
-sEXPORTED_FUNCTIONS=_fiddle_exec \
|
||||
-sEXIT_RUNTIME=1 \
|
||||
--pre-js $(fiddle_dir)/module-pre.js \
|
||||
--post-js $(fiddle_dir)/module-post.js \
|
||||
--shell-file $(fiddle_tmpl)
|
||||
$(fiddle_html): Makefile sqlite3.c shell.c $(fiddle_tmpl)
|
||||
$(fiddle_html): Makefile sqlite3.c shell.c $(fiddle_tmpl) \
|
||||
$(fiddle_dir)/module-pre.js $(fiddle_dir)/module-post.js
|
||||
emcc -o $@ $(emcc_flags) sqlite3.c shell.c
|
||||
fiddle: $(fiddle_html)
|
||||
|
||||
+10
-169
@@ -170,179 +170,20 @@ SELECT * FROM t;</textarea>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- #notes-caveats -->
|
||||
<script type='text/javascript'>
|
||||
(function(){
|
||||
/* An object for propagating certain config state between our
|
||||
JS code and the WASM module. */
|
||||
const config = {
|
||||
/* If true, the Module.print() impl will auto-scroll
|
||||
the output widget to the bottom when it receives output,
|
||||
else it won't. */
|
||||
autoScrollOutput: true,
|
||||
/* If true, the output area will be cleared before each
|
||||
command is run, else it will not. */
|
||||
autoClearOutput: false
|
||||
};
|
||||
/**
|
||||
Callback for the emscripten module init process, gets
|
||||
passed the module object after all parts of the module
|
||||
have been loaded and initialized.
|
||||
*/
|
||||
const doAppSetup = function(Module) {
|
||||
const taInput = document.querySelector('#input');
|
||||
const btnClearIn = document.querySelector('#btn-clear');
|
||||
document.querySelectorAll('button').forEach(function(e){
|
||||
e.removeAttribute('disabled');
|
||||
});
|
||||
btnClearIn.addEventListener('click',function(){
|
||||
taInput.value = '';
|
||||
},false);
|
||||
// Ctrl-enter and shift-enter both run the current SQL.
|
||||
taInput.addEventListener('keydown',function(ev){
|
||||
if((ev.ctrlKey || ev.shiftKey) && 13 === ev.keyCode){
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
btnRun.click();
|
||||
}
|
||||
}, false);
|
||||
const taOutput = document.querySelector('#output');
|
||||
const btnClearOut = document.querySelector('#btn-clear-output');
|
||||
btnClearOut.addEventListener('click',function(){
|
||||
taOutput.value = '';
|
||||
},false);
|
||||
/* Sends the given text to the shell. If it's null or empty, this
|
||||
is a no-op except that the very first call will initialize the
|
||||
db and output an informational header. */
|
||||
const doExec = function f(sql){
|
||||
if(!f._) f._ = Module.cwrap('fiddle_exec', null, ['string']);
|
||||
if(Module._isDead){
|
||||
Module.printErr("shell module has exit()ed. Cannot run SQL.");
|
||||
return;
|
||||
}
|
||||
if(config.autoClearOutput) taOutput.value='';
|
||||
f._(sql);
|
||||
};
|
||||
const btnRun = document.querySelector('#btn-run');
|
||||
btnRun.addEventListener('click',function(){
|
||||
const sql = taInput.value.trim();
|
||||
if(sql){
|
||||
doExec(sql);
|
||||
}
|
||||
},false);
|
||||
doExec(null)/*sets up the db and outputs the header*/;
|
||||
<!-- Maintenance notes:
|
||||
|
||||
document.querySelector('#opt-cb-sbs')
|
||||
.addEventListener('change', function(){
|
||||
document.querySelector('#main-wrapper').classList[
|
||||
this.checked ? 'add' : 'remove'
|
||||
]('side-by-side');
|
||||
}, false);
|
||||
document.querySelector('#btn-notes-caveats')
|
||||
.addEventListener('click', function(){
|
||||
document.querySelector('#notes-caveats').remove();
|
||||
}, false);
|
||||
- emscripten module init goes is in fiddle-pre.js and gets
|
||||
prepended to the generated script code.
|
||||
|
||||
/* For each checkbox with data-config=X, set up a binding to
|
||||
config[X]. */
|
||||
document.querySelectorAll('input[type=checkbox][data-config]')
|
||||
.forEach(function(e){
|
||||
e.checked = !!config[e.dataset.config];
|
||||
e.addEventListener('change', function(){
|
||||
config[this.dataset.config] = this.checked;
|
||||
}, false);
|
||||
});
|
||||
- App-specific code is in fiddle-post.js and gets appended to
|
||||
the generated script code.
|
||||
|
||||
/* For each button with data-cmd=X, map a click handler which
|
||||
calls doExec(X). */
|
||||
const cmdClick = function(){doExec(this.dataset.cmd);};
|
||||
document.querySelectorAll('button[data-cmd]').forEach(
|
||||
e => e.addEventListener('click', cmdClick, false)
|
||||
);
|
||||
};
|
||||
- The following placeholder (if you're reading this in the
|
||||
input template file) gets replaced by a generated
|
||||
amalgamation of: module-pre.js, emcc-generated bootstrapping
|
||||
code, and module-post.js.
|
||||
|
||||
/**
|
||||
What follows is part of the emscripten core setup. Do not
|
||||
modify without understanding what it's doing...
|
||||
*/
|
||||
const statusElement = document.getElementById('status');
|
||||
const progressElement = document.getElementById('progress');
|
||||
const spinnerElement = document.getElementById('spinner');
|
||||
const Module = window.Module = {
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
onRuntimeInitialized: function(){
|
||||
doAppSetup(this);
|
||||
},
|
||||
print: (function f() {
|
||||
if(!f._){
|
||||
f._ = document.getElementById('output');
|
||||
}
|
||||
f._.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if(arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
//console.log("arguments",arguments);
|
||||
console.log(text);
|
||||
f._.value += text + "\n";
|
||||
if(config.autoScrollOutput){
|
||||
f._.scrollTop = f._.scrollHeight;
|
||||
}
|
||||
};
|
||||
})(),
|
||||
setStatus: function f(text) {
|
||||
if(!f.last) f.last = { time: Date.now(), text: '' };
|
||||
if(text === f.last.text) return;
|
||||
const m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
const now = Date.now();
|
||||
if(m && now - f.last.time < 30) return; // if this is a progress update, skip it if too soon
|
||||
f.last.time = now;
|
||||
f.last.text = text;
|
||||
if(m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if(!text) spinnerElement.hidden = true;
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
this.setStatus(left
|
||||
? ('Preparing... (' + (this.totalDependencies-left)
|
||||
+ '/' + this.totalDependencies + ')')
|
||||
: 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.printErr = Module.print/*capture stderr output*/;
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(/*message, source, lineno, colno, error*/) {
|
||||
const err = arguments[4];
|
||||
if(err && 'ExitStatus'==err.name){
|
||||
Module._isDead = true;
|
||||
Module.printErr("FATAL ERROR:", err.message);
|
||||
Module.printErr("Restarting the app requires reloading the page.");
|
||||
const taOutput = document.querySelector('#output');
|
||||
if(taOutput) taOutput.classList.add('error');
|
||||
}
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if(text) console.error('[post-exception status] ' + text);
|
||||
};
|
||||
};
|
||||
})();
|
||||
</script>
|
||||
-->
|
||||
{{{ SCRIPT }}}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
/* This is the --post-js file for emcc. It gets appended to the
|
||||
generated fiddle.js. It should contain all app-level code.
|
||||
|
||||
Maintenance achtung: do not call any wasm-bound functions from
|
||||
outside of the onRuntimeInitialized() function. They are not
|
||||
permitted to be called until after the module init is complete,
|
||||
which does not happen until after this file is processed. Once that
|
||||
init is finished, Module.onRuntimeInitialized() will be
|
||||
triggered. All app-level init code should go into that callback or
|
||||
be triggered via it. Calling wasm-bound functions before that
|
||||
callback is run will trigger an assertion in the wasm environment.
|
||||
*/
|
||||
window.Module.onRuntimeInitialized = function(){
|
||||
'use strict';
|
||||
const Module = window.Module /* wasm module as set up by emscripten */;
|
||||
delete Module.onRuntimeInitialized;
|
||||
const taInput = document.querySelector('#input');
|
||||
const btnClearIn = document.querySelector('#btn-clear');
|
||||
document.querySelectorAll('button').forEach(function(e){
|
||||
e.removeAttribute('disabled');
|
||||
});
|
||||
btnClearIn.addEventListener('click',function(){
|
||||
taInput.value = '';
|
||||
},false);
|
||||
// Ctrl-enter and shift-enter both run the current SQL.
|
||||
taInput.addEventListener('keydown',function(ev){
|
||||
if((ev.ctrlKey || ev.shiftKey) && 13 === ev.keyCode){
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
btnRun.click();
|
||||
}
|
||||
}, false);
|
||||
const taOutput = document.querySelector('#output');
|
||||
const btnClearOut = document.querySelector('#btn-clear-output');
|
||||
btnClearOut.addEventListener('click',function(){
|
||||
taOutput.value = '';
|
||||
},false);
|
||||
/* Sends the given text to the shell. If it's null or empty, this
|
||||
is a no-op except that the very first call will initialize the
|
||||
db and output an informational header. */
|
||||
const doExec = function f(sql){
|
||||
if(!f._) f._ = Module.cwrap('fiddle_exec', null, ['string']);
|
||||
if(Module._isDead){
|
||||
Module.printErr("shell module has exit()ed. Cannot run SQL.");
|
||||
return;
|
||||
}
|
||||
if(Module.config.autoClearOutput) taOutput.value='';
|
||||
f._(sql);
|
||||
};
|
||||
const btnRun = document.querySelector('#btn-run');
|
||||
btnRun.addEventListener('click',function(){
|
||||
const sql = taInput.value.trim();
|
||||
if(sql){
|
||||
doExec(sql);
|
||||
}
|
||||
},false);
|
||||
|
||||
document.querySelector('#opt-cb-sbs')
|
||||
.addEventListener('change', function(){
|
||||
document.querySelector('#main-wrapper').classList[
|
||||
this.checked ? 'add' : 'remove'
|
||||
]('side-by-side');
|
||||
}, false);
|
||||
document.querySelector('#btn-notes-caveats')
|
||||
.addEventListener('click', function(){
|
||||
document.querySelector('#notes-caveats').remove();
|
||||
}, false);
|
||||
|
||||
/* For each checkbox with data-config=X, set up a binding to
|
||||
Module.config[X]. */
|
||||
document.querySelectorAll('input[type=checkbox][data-config]')
|
||||
.forEach(function(e){
|
||||
e.checked = !!Module.config[e.dataset.config];
|
||||
e.addEventListener('change', function(){
|
||||
Module.config[this.dataset.config] = this.checked;
|
||||
}, false);
|
||||
});
|
||||
|
||||
/* For each button with data-cmd=X, map a click handler which
|
||||
calls doExec(X). */
|
||||
const cmdClick = function(){doExec(this.dataset.cmd);};
|
||||
document.querySelectorAll('button[data-cmd]').forEach(
|
||||
e => e.addEventListener('click', cmdClick, false)
|
||||
);
|
||||
|
||||
doExec(null)/*sets up the db and outputs the header*/;
|
||||
};
|
||||
@@ -0,0 +1,100 @@
|
||||
/* This is the --pre-js file for emcc. It gets prepended to the
|
||||
generated fiddle.js. It should contain only code which is relevant
|
||||
to the setup and initialization of the wasm module. */
|
||||
(function(){
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
What follows is part of the emscripten core setup. Do not
|
||||
modify it without understanding what it's doing.
|
||||
*/
|
||||
const statusElement = document.getElementById('status');
|
||||
const progressElement = document.getElementById('progress');
|
||||
const spinnerElement = document.getElementById('spinner');
|
||||
const Module = window.Module = {
|
||||
/* Config object. Referenced by certain Module methods and
|
||||
app-level code. */
|
||||
config: {
|
||||
/* If true, the Module.print() impl will auto-scroll
|
||||
the output widget to the bottom when it receives output,
|
||||
else it won't. */
|
||||
autoScrollOutput: true,
|
||||
/* If true, the output area will be cleared before each
|
||||
command is run, else it will not. */
|
||||
autoClearOutput: false,
|
||||
/* If true, Module.print() will echo its output to
|
||||
the console, in addition to its normal output widget. */
|
||||
printToConsole: false,
|
||||
},
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
//onRuntimeInitialized: function(){},
|
||||
print: (function f() {
|
||||
if(!f._){
|
||||
f._ = document.getElementById('output');
|
||||
}
|
||||
f._.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if(arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
//console.log("arguments",arguments);
|
||||
if(window.Module.config.printToConsole) console.log(text);
|
||||
f._.value += text + "\n";
|
||||
if(window.Module.config.autoScrollOutput){
|
||||
f._.scrollTop = f._.scrollHeight;
|
||||
}
|
||||
};
|
||||
})(),
|
||||
setStatus: function f(text) {
|
||||
if(!f.last) f.last = { time: Date.now(), text: '' };
|
||||
if(text === f.last.text) return;
|
||||
const m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
const now = Date.now();
|
||||
if(m && now - f.last.time < 30) return; // if this is a progress update, skip it if too soon
|
||||
f.last.time = now;
|
||||
f.last.text = text;
|
||||
if(m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if(!text) spinnerElement.hidden = true;
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
this.setStatus(left
|
||||
? ('Preparing... (' + (this.totalDependencies-left)
|
||||
+ '/' + this.totalDependencies + ')')
|
||||
: 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.printErr = Module.print/*capture stderr output*/;
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(/*message, source, lineno, colno, error*/) {
|
||||
const err = arguments[4];
|
||||
if(err && 'ExitStatus'==err.name){
|
||||
Module._isDead = true;
|
||||
Module.printErr("FATAL ERROR:", err.message);
|
||||
Module.printErr("Restarting the app requires reloading the page.");
|
||||
const taOutput = document.querySelector('#output');
|
||||
if(taOutput) taOutput.classList.add('error');
|
||||
}
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if(text) console.error('[post-exception status] ' + text);
|
||||
};
|
||||
};
|
||||
})();
|
||||
@@ -1,9 +1,9 @@
|
||||
C Added\san\soption\sto\sauto-clear\sthe\soutput\sarea\sbefore\ssubmitting\sthe\sinput.\sExperimentally\sinverted\sthe\scolors\sin\sthe\sinput/output\sareas.
|
||||
D 2022-05-19T09:22:16.127
|
||||
C Split\sthe\sfiddle\sJS\scode\sinto\sseparate\spre-/post-init\sfiles\sto\ssimplify\sediting.\semcc\swill\scombine\sthese\sinto\sthe\sfinal\sfiddle.js,\sso\sthe\snumber\sof\soutput\sdeliverables\sdoes\snot\schange.
|
||||
D 2022-05-19T09:55:14.804
|
||||
F .fossil-settings/empty-dirs dbb81e8fc0401ac46a1491ab34a7f2c7c0452f2f06b54ebb845d024ca8283ef1
|
||||
F .fossil-settings/ignore-glob 35175cdfcf539b2318cb04a9901442804be81cd677d8b889fcc9149c21f239ea
|
||||
F LICENSE.md df5091916dbb40e6e9686186587125e1b2ff51f022cc334e886c19a0e9982724
|
||||
F Makefile.in 92890acbab78c76f32ebb1ad50b961c3fc413f7b05052663c8b17d1b7f74a697
|
||||
F Makefile.in 7835a8858609cd5f40b84e86cca78bd2c25c54f2e8b22fa76b16acf83509cb63
|
||||
F Makefile.linux-gcc f609543700659711fbd230eced1f01353117621dccae7b9fb70daa64236c5241
|
||||
F Makefile.msc b28a8a7a977e7312f6859f560348e1eb110c21bd6cf9fab0d16537c0a514eef3
|
||||
F README.md 8b8df9ca852aeac4864eb1e400002633ee6db84065bd01b78c33817f97d31f5e
|
||||
@@ -56,8 +56,10 @@ F ext/expert/sqlite3expert.c 6ca30d73b9ed75bd56d6e0d7f2c962d2affaa72c505458619d0
|
||||
F ext/expert/sqlite3expert.h ca81efc2679a92373a13a3e76a6138d0310e32be53d6c3bfaedabd158ea8969b
|
||||
F ext/expert/test_expert.c d56c194b769bdc90cf829a14c9ecbc1edca9c850b837a4d0b13be14095c32a72
|
||||
F ext/fiddle/Makefile ea647919e6ac4b50edde1490f60ee87e8ccd75141e4aa650718c6f28eb323bbc
|
||||
F ext/fiddle/fiddle.in.html 05192302452a1ff410a12de04d10802c89fd90c67d2e7a0983cca599b78d802d
|
||||
F ext/fiddle/fiddle.in.html 69f8eeb8dc22cbaca2c890ed689d65dd8ad00e896b1a29caae8a22893fc51d8e
|
||||
F ext/fiddle/index.md d9c1c308d8074341bc3b11d1d39073cd77754cb3ca9aeb949f23fdd8323d81cf
|
||||
F ext/fiddle/module-post.js 8d62f2199cb367267b7799f259c43673f43578f788f30e106a17b2eccbc8a918
|
||||
F ext/fiddle/module-pre.js 31661050c461fa05fbaa564e5369795eed8957458ea81fd2038157d852ff93c8
|
||||
F ext/fts1/README.txt 20ac73b006a70bcfd80069bdaf59214b6cf1db5e
|
||||
F ext/fts1/ft_hash.c 3927bd880e65329bdc6f506555b228b28924921b
|
||||
F ext/fts1/ft_hash.h 06df7bba40dadd19597aa400a875dbc2fed705ea
|
||||
@@ -1957,8 +1959,8 @@ F vsixtest/vsixtest.tcl 6a9a6ab600c25a91a7acc6293828957a386a8a93
|
||||
F vsixtest/vsixtest.vcxproj.data 2ed517e100c66dc455b492e1a33350c1b20fbcdc
|
||||
F vsixtest/vsixtest.vcxproj.filters 37e51ffedcdb064aad6ff33b6148725226cd608e
|
||||
F vsixtest/vsixtest_TemporaryKey.pfx e5b1b036facdb453873e7084e1cae9102ccc67a0
|
||||
P 6661d60527820417bbfd01c782d242c5190252ea703fc6f56376537d5c8f6a1e
|
||||
R 1ba355c6c9a1901c14ddac3fca9f90fb
|
||||
P 1a1e4e7fdbd0ec61218c3a311164086316d825181f3fc1c1ec235b63488746ef
|
||||
R 845cc95de5a1a485fbec7d915e3ef826
|
||||
U stephan
|
||||
Z 350abcb9556383a2d29c463740d62bfd
|
||||
Z 439fa3de2a51242095eb61aca5099555
|
||||
# Remove this line to create a well-formed Fossil manifest.
|
||||
|
||||
+1
-1
@@ -1 +1 @@
|
||||
1a1e4e7fdbd0ec61218c3a311164086316d825181f3fc1c1ec235b63488746ef
|
||||
d3d8ea011868bcfa11bb3fe2db78eea6e77ac1005534d9c091f9a81e03f0a7e6
|
||||
Reference in New Issue
Block a user