database/sqlite
1
0
Fork 0
mirror of https://github.com/sqlite/sqlite.git synced 2025-12-24 14:17:58 +03:00
Code Activity

Fiddle: add an about/info/help view and a button to toggle it. Change the color schema to a more conventional black/white. Force imported databases out of WAL mode, which doesn't work in fiddle.

Browse Source 
FossilOrigin-Name: 27d1d0100c0cb6e5c0c576be0f99209bb905f302008d8c257039adf8c5402f7d
This commit is contained in:
stephan
2025-08-02 12:06:37 +00:00
parent 46c7568db5
commit a0e569d5ba
5 changed files with 112 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
ext/wasm/fiddle/fiddle-worker.js
View File

@@ -163,9 +163,11 @@
fiddleModule.isDead = true;
return false;
}
stdout("SQLite version", capi.sqlite3_libversion(),
capi.sqlite3_sourceid().substr(0,19));
stdout('Welcome to the "fiddle" shell.');
wMsg('sqlite-version', {
lib: capi.sqlite3_libversion(),
srcId: capi.sqlite3_sourceid()
});
stdout('Welcome to the "fiddle" shell. Tap the About button for more info.');
if(capi.sqlite3_vfs_find("opfs")){
stdout("\nOPFS is available. To open a persistent db, use:\n\n",
" .open file:name?vfs=opfs\n\nbut note that some",
@@ -281,6 +283,7 @@
stderr("'open' expects {buffer:Uint8Array} containing an uploaded db.");
return;
}
buffer.set([1,1], 18)/*force db out of WAL mode*/;
const fn = (
opt.filename
? opt.filename.split(/[/\\]/).pop().replace('"','_')

35
ext/wasm/fiddle/fiddle.js
View File

@@ -329,6 +329,21 @@
SF.worker = new Worker('fiddle-worker.js'+self.location.search);
SF.worker.onmessage = (ev)=>SF.runMsgHandlers(ev.data);
SF.addMsgHandler(['stdout', 'stderr'], (ev)=>SF.echo(ev.data));
SF.addMsgHandler('sqlite-version', (ev)=>{
const v = ev.data;
const a = E('#sqlite-version-link');
const li = v.srcId.split(' ')/*DATE TIME HASH*/;
a.setAttribute('href',
//'https://sqlite.org/src/timeline/?c='+li[2].substr(0,20)
'https://sqlite.org/src/info/'+li[2].substr(0,20)
);
a.setAttribute('target', '_blank');
a.innerText = [
v.lib,
v.srcId.substr(0,34)
].join(' ');
SF.echo("SQLite version",a.innerText);
});
/* querySelectorAll() proxy */
const EAll = function(/*[element=document,] cssSelector*/){
@@ -391,6 +406,16 @@
self.onSFLoaded();
});
/** Toggle the "About" view on and off. */
SF.toggleAbout = function(){
this.eOther.classList.toggle('hidden');
this.eAbout.classList.toggle('hidden');
}.bind({
eOther: E("#main-wrapper"),
eAbout: E("#view-about")
});
/**
Performs all app initialization which must wait until after the
worker module is loaded. This function removes itself when it's
@@ -400,7 +425,13 @@
delete this.onSFLoaded;
// Unhide all elements which start out hidden
EAll('.initially-hidden').forEach((e)=>e.classList.remove('initially-hidden'));
if( (new URL(self.location.href).searchParams).has('about') ){
SF.toggleAbout() /* for use while editing the About page */;
}
E('#btn-reset').addEventListener('click',()=>SF.resetDb());
EAll('#btn-about, #btn-about-close').forEach((e)=>{
e.addEventListener('click',()=>SF.toggleAbout())
});
const taInput = E('#input');
const btnClearIn = E('#btn-clear');
const selectExamples = E('#select-examples');
@@ -810,10 +841,6 @@
}, false);
btnToggleView.click()/*default to terminal view*/;
}
SF.echo('This experimental app is provided in the hope that it',
'may prove interesting or useful but is not an officially',
'supported deliverable of the sqlite project. It is subject to',
'any number of changes or outright removal at any time.\n');
const urlParams = new URL(self.location.href).searchParams;
SF.dbExec(urlParams.get('sql') || null);
delete ForceResizeKludge.$disabled;

69
ext/wasm/fiddle/index.html
View File

@@ -13,7 +13,7 @@
/* The following styles are for app-level use. */
:root {
--sqlite-blue: #044a64;
--textarea-color1: #044a64;
--textarea-color1: #000 /*044a64 is nice too*/;
--textarea-color2: white;
}
textarea {
@@ -170,6 +170,17 @@
display: flex;
flex-direction: column-reverse;
}
#view-about {
flex: auto;
overflow: auto;
}
#view-about h1:first-child {
display: flex;
}
#view-about h1:first-child > button {
align-self: center;
margin-left: 1em;
}
/* emcscript-related styling, used during the module load/intialization processes... */
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
@@ -215,7 +226,7 @@
</figure>
<div class="emscripten" id="module-status">Downloading...</div>
<div class="emscripten">
<progress value="0" max="100" id="module-progress" hidden='1'></progress>
<progress value="0" max="100" id="module-progress" hidden='1'></progress>
</div><!-- /emscripten bits -->
<div id='view-terminal' class='app-view hidden initially-hidden'>
@@ -261,6 +272,9 @@
<span class='labeled-input'>
<button id='btn-reset'>Reset DB</button>
</span>
<span class='labeled-input'>
<button id='btn-about'>About...</button>
</span>
</div>
</fieldset><!-- .options -->
<div id='main-wrapper' class=''>
@@ -295,8 +309,55 @@
<div><textarea id="output" readonly
placeholder="Shell output."></textarea></div>
</fieldset>
</div>
</div><!-- #main-wrapper -->
<div class='hidden' id='view-about'>
<h1>About SQLite Fiddle <button id='btn-about-close'>close</button></h1>
<p>Fiddle is a JavaScript application wrapping a <a href='https://webassembly.org'>WebAssembly</a>
build of <a href="https://sqlite.org/cli.html">the SQLite CLI shell</a>, slightly
modified to account for browser-based user input. Aside from the different layout,
it works just like the CLI shell. This copy was built with SQLite version
<a id='sqlite-version-link'></a>.
</p>
<p>This app is provided in the hope that it may prove interesting or useful
but it is not an officially-supported deliverable of the SQLite project.
It is subject to any number of changes or outright removal at any time.
That said, for as long as it's online we do respond to support requests
in <a href="https://sqlite.org/forum">the SQLite forum</a>.
</p>
<p>This app runs on your device. After loading, it does not interact
with the remote server at all. Similarly, this app does not use any
HTTP cookies.</p>
<p>Fiddle databases are transient in-memory databases unless they
specifically use a persistent storage option (if available, help
text in the SQL result output area will indicate how to use
persistent storage when this app starts up).
</p>
<h1>Usage Summary</h1>
<ul>
<li>Input can be run with either the Run button or tapping one of
Ctrl-enter or Shift-enter from within the text input field.
If a portion of the input field is selected, only that portion will be run.
</li>
<li>The various toggle checkboxes can be used to tweak the layout.
Those toggles are persistent if the JS environment allows it.</li>
<li>Databases can be imported and exported using the buttons in
the Options toolbar. No specific limit for imported database
sizes is imposed, but large databases may cause it to fail with
an out-of-memory error.</li>
<!--li></li-->
</ul>
</div><!-- #view-about -->
</div> <!-- #view-split -->
<script src="fiddle.js"></script>
<script src="fiddle.js"></script>
</body>
</html>

19
manifest
View File

@@ -1,5 +1,5 @@
C Ensure\sthat\sstack\sspace\sallocated\sfor\sa\sflexible\sarray\shas\sthe\scorrect\nalignment.\s\sFix\sto\s[d4307a0d43f42e96]\sto\sfor\ssome\scompilers\n(DeveloperStudio)\sand\splatforms\s(Sparc).
D 2025-07-31T12:25:23.837
C Fiddle:\sadd\san\sabout/info/help\sview\sand\sa\sbutton\sto\stoggle\sit.\sChange\sthe\scolor\sschema\sto\sa\smore\sconventional\sblack/white.\sForce\simported\sdatabases\sout\sof\sWAL\smode,\swhich\sdoesn't\swork\sin\sfiddle.
D 2025-08-02T12:06:37.203
F .fossil-settings/binary-glob 61195414528fb3ea9693577e1980230d78a1f8b0a54c78cf1b9b24d0a409ed6a x
F .fossil-settings/empty-dirs dbb81e8fc0401ac46a1491ab34a7f2c7c0452f2f06b54ebb845d024ca8283ef1
F .fossil-settings/ignore-glob 35175cdfcf539b2318cb04a9901442804be81cd677d8b889fcc9149c21f239ea
@@ -676,9 +676,9 @@ F ext/wasm/demo-worker1.js 08720227e98fa5b44761cf6e219269cee3e9dd0421d8d91459535
F ext/wasm/dist.make c29018b4db479a4c170569393e5399f0625446123a7eb6ffb0677495292bb954
F ext/wasm/example_extra_init.c 2347cd69d19d839ef4e5e77b7855103a7fe3ef2af86f2e8c95839afd8b05862f
F ext/wasm/fiddle.make ea505d11aa2a89551e1693ed4c71ee6a163364ca14f806dda295d0beb26ec0ea
F ext/wasm/fiddle/fiddle-worker.js 850e66fce39b89d59e161d1abac43a181a4caa89ddeea162765d660277cd84ce
F ext/wasm/fiddle/fiddle.js 2a2f27b4be2674f501fff61c4a09e44dcf2295731a26b5c28e439f3a573bd269
F ext/wasm/fiddle/index.html 7fcfb221165183bef0e05d5af9ceb79b527e799b1708ab05de0ec0eaebd5b7bf
F ext/wasm/fiddle/fiddle-worker.js 50d3edf54c0c0e3657e876724ec2c10069f55f3e40af20864d72f6f6e9ad00f8
F ext/wasm/fiddle/fiddle.js 03b2cdd2a935d5dd085dccd7c8e6ce1b64bf0f9c3c1290ca80d72542f1b86de0
F ext/wasm/fiddle/index.html 37fd85cc878f461cc072f47c0f37ab1d8cd9404295536e1bd7b2684085d38b76
F ext/wasm/index-dist.html 56132399702b15d70c474c3f1952541e25cb0922942868f70daf188f024b3730
F ext/wasm/index.html bcaa00eca521b372a6a62c7e7b17a870b0fcdf3e418a5921df1fd61e5344080d
F ext/wasm/jaccwabyt/jaccwabyt.js 6e4f26d0edb5c2e7d381b7eff1924832a040a12274afab2d1e1789027e9f6c5c
@@ -2213,9 +2213,8 @@ F tool/version-info.c 3b36468a90faf1bbd59c65fd0eb66522d9f941eedd364fabccd7227350
F tool/warnings-clang.sh bbf6a1e685e534c92ec2bfba5b1745f34fb6f0bc2a362850723a9ee87c1b31a7
F tool/warnings.sh 1ad0169b022b280bcaaf94a7fa231591be96b514230ab5c98fbf15cd7df842dd
F tool/win/sqlite.vsix deb315d026cc8400325c5863eef847784a219a2f
P cc5f126ea4fa4a1abf183c95d151a7e9bd151b90c5c581d3be56db23bbe05a19 7318a00de64ec89c2a08d86e9f50c694894c4b59b07ff52b0d1f9f0ab8c4df44
R b3cce284967c0e0245001652919d7f5b
T +closed 7318a00de64ec89c2a08d86e9f50c694894c4b59b07ff52b0d1f9f0ab8c4df44
U drh
Z 1a5f01356c285b08d1cd9d48b01a0055
P 1cccea0508f5c8b8ff751f407873713adc33f8642dcb6cdd495fd2d72ebcbdd3
R d5f4dc4132df6c16c8a5582596913945
U stephan
Z 1d4cd24556abd41e13f5fd162512c056
# Remove this line to create a well-formed Fossil manifest.

2
manifest.uuid
View File

@@ -1 +1 @@
1cccea0508f5c8b8ff751f407873713adc33f8642dcb6cdd495fd2d72ebcbdd3
27d1d0100c0cb6e5c0c576be0f99209bb905f302008d8c257039adf8c5402f7d