ext/wasm/index-dist.html

   1 <!doctype html>
   2 <html lang="en-us">
   3   <head>
   4     <meta charset="utf-8">
   5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   6     <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
   7     <title>sqlite3 WASM Demo Page Index</title>
   8   </head>
   9   <body>
  10     <style>
  11       body {
  12           display: flex;
  13           flex-direction: column;
  14           flex-wrap: wrap;
  15       }
  16       textarea {
  17           font-family: monospace;
  18       }
  19       header {
  20           font-size: 130%;
  21           font-weight: bold;
  22           background: #044a64;
  23           color: white;
  24           padding: 0.5em;
  25           border-radius: 0.25em;
  26       }
  27       .hidden, .initially-hidden {
  28           position: absolute !important;
  29           opacity: 0 !important;
  30           pointer-events: none !important;
  31           display: none !important;
  32       }
  33       .warning { color: firebrick; }
  34     </style>
  35     <header id='titlebar'><span>sqlite3 WASM demo pages</span></header>
  36     <hr>
  37     <div>Below is the list of demo pages for the sqlite3 WASM
  38       builds. The intent is that <em>this</em> page be run
  39       using the functional equivalent of:</div>
  40     <blockquote><pre><a href='https://sqlite.org/althttpd'>althttpd</a> -enable-sab -page index.html</pre></blockquote>
  41     <div>and the individual pages be started in their own tab.
  42       Warnings and Caveats:
  43       <ul class='warning'>
  44         <li>All of these pages must be served via an HTTP
  45           server. Browsers do not support loading WASM files via
  46           file:// URLs.</li>
  47         <li>Any OPFS-related pages or tests require:
  48           <ul>
  49             <li>An OPFS-capable browser released after February
  50               2023. Some tests will work with Chromium-based browsers
  51               going back to around v102.</li>
  52             <li>That the web server emit the so-called
  53               <a href='https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy'>COOP</a>
  54               and
  55               <a href='https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy'>COEP</a>
  56               headers. <a href='https://sqlite.org/althttpd'>althttpd</a> requires the
  57               <code>-enable-sab</code> flag for that.
  58             </li>
  59           </ul>
  60         </li>
  61       </ul>
  62     </div>
  63     <div>The tests and demos...
  64       <ul id='test-list'>
  65         <li>Core-most tests
  66           <ul>
  67             <li><a href='tester1.html'>tester1</a>: Core unit and
  68               regression tests for the various APIs and surrounding
  69               utility code.</li>
  70             <li><a href='tester1-worker.html'>tester1-worker</a>: same thing
  71               but running in a Worker.</li>
  72             <li><a href='tester1-esm.html'>tester1-esm</a>: same as
  73               <code>tester1</code> but loads sqlite3 in the main thread via
  74               an ES6 module.
  75             </li>
  76             <li><a href='tester1-worker.html?esm'>tester1-worker?esm</a>:
  77               same as <code>tester1-esm</code> but loads a Worker Module which
  78               then loads the sqlite3 API via an ES6 module. Note that
  79               not all browsers permit loading modules in Worker
  80               threads.
  81             </li>
  82           </ul>
  83         </li>
  84         <li>Higher-level apps and demos...
  85           <ul>
  86             <li><a href='demo-123.html'>demo-123</a> provides a
  87               no-nonsense example of adding sqlite3 support to a web
  88               page in the UI thread.</li>
  89             <li><a href='demo-123-worker.html'>demo-123-worker</a> is
  90               the same as <code>demo-123</code> but loads and runs
  91               sqlite3 from a Worker thread.</li>
  92             <li><a href='demo-jsstorage.html'>demo-jsstorage</a>: very basic
  93               demo of using the key-value VFS for storing a persistent db
  94               in JS <code>localStorage</code> or <code>sessionStorage</code>.</li>
  95             <li><a href='demo-worker1.html'>demo-worker1</a>:
  96               Worker-based wrapper of the OO API #1. Its Promise-based
  97               wrapper is significantly easier to use, however.</li>
  98             <li><a href='demo-worker1-promiser.html'>demo-worker1-promiser</a>:
  99               a demo of the Promise-based wrapper of the Worker1 API.</li>
 100             <li><a href='demo-worker1-promiser-esm.html'>demo-worker1-promiser-esm</a>:
 101               same as the previous demo except loads the promiser from an ESM module.</li>
 102           </ul>
 103         </li>
 104       </ul>
 105     </div>
 106     <style>
 107       #test-list { font-size: 120%; }
 108     </style>
 109     <script>//Assign a distinct target tab name for each test page...
 110       document.querySelectorAll('a').forEach(function(e){
 111           e.target = e.href;
 112       });
 113     </script>
 114   </body>
 115 </html>