2022-10-19 06:06:42 +00:00
<!doctype html>
< html lang = "en-us" >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< link rel = "shortcut icon" href = "data:image/x-icon;," type = "image/x-icon" >
< title > sqlite3 WASM Demo Page Index< / title >
< / head >
< body >
< style >
body {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
textarea {
font-family: monospace;
}
header {
font-size: 130%;
font-weight: bold;
2022-12-02 11:35:21 +00:00
background: #044a64;
color: white;
padding: 0.5em;
border-radius: 0.25em;
2022-10-19 06:06:42 +00:00
}
.hidden, .initially-hidden {
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
display: none !important;
}
.warning { color: firebrick; }
< / style >
< header id = 'titlebar' > < span > sqlite3 WASM demo pages< / span > < / header >
< hr >
< div > Below is the list of demo pages for the sqlite3 WASM
builds. The intent is that < em > this< / em > page be run
using the functional equivalent of:< / div >
< blockquote > < pre > < a href = 'https://sqlite.org/althttpd' > althttpd< / a > -enable-sab -page index.html< / pre > < / blockquote >
< div > and the individual pages be started in their own tab.
Warnings and Caveats:
< ul class = 'warning' >
2023-02-10 11:05:16 +00:00
< li > All of these pages must be served via an HTTP
server. Browsers do not support loading WASM files via
file:// URLs.< / li >
< li > Any OPFS-related pages or tests require:
< ul >
2023-11-30 10:00:25 +00:00
< li > An OPFS-capable browser released after February
2023. Some tests will work with Chromium-based browsers
going back to around v102.< / li >
2023-02-10 11:05:16 +00:00
< li > That the web server emit the so-called
< a href = 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy' > COOP< / a >
and
< a href = 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy' > COEP< / a >
headers. < a href = 'https://sqlite.org/althttpd' > althttpd< / a > requires the
< code > -enable-sab< / code > flag for that.
< / li >
< / ul >
2022-10-19 06:06:42 +00:00
< / li >
< / ul >
< / div >
< div > The tests and demos...
< ul id = 'test-list' >
< li > Core-most tests
< ul >
< li > < a href = 'tester1.html' > tester1< / a > : Core unit and
regression tests for the various APIs and surrounding
utility code.< / li >
< li > < a href = 'tester1-worker.html' > tester1-worker< / a > : same thing
2022-10-19 07:34:36 +00:00
but running in a Worker.< / li >
2022-11-19 16:16:40 +00:00
< li > < a href = 'tester1-esm.html' > tester1-esm< / a > : same as
< code > tester1< / code > but loads sqlite3 in the main thread via
an ES6 module.
< / li >
< li > < a href = 'tester1-worker.html?esm' > tester1-worker?esm< / a > :
same as < code > tester1-esm< / code > but loads a Worker Module which
then loads the sqlite3 API via an ES6 module. Note that
not all browsers permit loading modules in Worker
threads.
2022-11-19 05:26:45 +00:00
< / li >
2022-10-19 06:06:42 +00:00
< / ul >
< / li >
2022-10-19 07:34:36 +00:00
< li > Higher-level apps and demos...
2022-10-19 06:06:42 +00:00
< ul >
< li > < a href = 'demo-123.html' > demo-123< / a > provides a
no-nonsense example of adding sqlite3 support to a web
page in the UI thread.< / li >
< li > < a href = 'demo-123-worker.html' > demo-123-worker< / a > is
the same as < code > demo-123< / code > but loads and runs
sqlite3 from a Worker thread.< / li >
2022-10-19 07:34:36 +00:00
< li > < a href = 'demo-jsstorage.html' > demo-jsstorage< / a > : very basic
demo of using the key-value VFS for storing a persistent db
in JS < code > localStorage< / code > or < code > sessionStorage< / code > .< / li >
< li > < a href = 'demo-worker1.html' > demo-worker1< / a > :
Worker-based wrapper of the OO API #1. Its Promise-based
wrapper is significantly easier to use, however.< / li >
< li > < a href = 'demo-worker1-promiser.html' > demo-worker1-promiser< / a > :
a demo of the Promise-based wrapper of the Worker1 API.< / li >
2022-10-19 06:06:42 +00:00
< / ul >
< / li >
< / ul >
< / div >
< style >
#test-list { font-size: 120%; }
< / style >
< script > / / A s s i g n a d i s t i n c t t a r g e t t a b n a m e f o r e a c h t e s t p a g e . . .
document.querySelectorAll('a').forEach(function(e){
e.target = e.href;
});
< / script >
< / body >
< / html >
