index-dist.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  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>