<!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>Hello, sqlite3</title>
    <style>
      .warning, .error {color: red}
      .error {background-color: yellow}
      body {
          display: flex;
          flex-direction: column;
          font-family: monospace;
          white-space: break-spaces;
      }
    </style>
  </head>
  <body>
    <h1>1-2-sqlite3 worker demo</h1>
    <script>(function(){
      const logHtml = function(cssClass,...args){
        const ln = document.createElement('div');
        if(cssClass) ln.classList.add(cssClass);
        ln.append(document.createTextNode(args.join(' ')));
        document.body.append(ln);
      };
      const w = new Worker("demo-123.js?sqlite3.dir=jswasm"
                           /* Note the URL argument on that name. See
                              the notes in demo-123.js (search for
                              "importScripts") for why we need
                              that. */);
      w.onmessage = function({data}){
        switch(data.type){
            case 'log':
              logHtml(data.payload.cssClass, ...data.payload.args);
              break;
            default:
              logHtml('error',"Unhandled message:",data.type);
        };
      };
    })();</script>
  </body>
</html>
