Complete echo + create w/ brotli support

create.html

<!-- <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js" defer></script> -->
<!-- <script src="../node_modules/qrcodejs/qrcode.min.js" defer></script>
<script src="create-bundle.js" defer></script> -->


<!-- <script src="qrcode.min.js"></script> -->
<script src="qrcode.js"></script>
<script src="create.js"></script>

<input type="file" id="fileInput" />
<textarea rows=10 cols=80 id="textInput"></textarea>

<div id="outInfo"></div>
<a href="#" target="_blank" id="out">Data Uri</a>
<!--<div id="qrcode" style="margin: 5px"></div>-->
<canvas id="qrcode"></canvas>

<iframe id="outFrame"></iframe>

create.js

import * as brotliPromise from 'brotli-wasm';
// var decompress = require('brotli/decompress');

window.addEventListener('load', async () => {
  const brotli = await brotliPromise; // Import is async in browsers due to wasm requirements!
    
  var minifyCode = src => src
      .replaceAll(/\s+/g, ' ')
      .replaceAll(/([^\w]) ([^\w])/g, '$1$2')
      .replaceAll(/(\w) ([^\w])/g, '$1$2')
      .replaceAll(/([^\w]) (\w)/g, '$1$2')
      .trim();

  var blobToDataUri = blob =>
    new Promise((res) => Object.assign(new FileReader(), {onload: (e) => res(e.target.result)}).readAsDataURL(blob));

  var blobToBase64 = async (blob) => (await blobToDataUri(blob)).split(',', 2)[1];

  // const gzip = blob => new Response(blob.stream().pipeThrough(new CompressionStream('gzip'))).blob();
  // const gunzip = blob => new Response(blob.stream().pipeThrough(new DecompressionStream('gzip'))).blob();

  async function encode(blob) {
    const brotliInput = new Uint8Array(await blob.arrayBuffer());
    const brotliOutput = brotli.compress(brotliInput)
    console.log(`input: ${brotliInput.byteLength}, output: ${brotliOutput.byteLength}`)


    console.log("RET: " + await new Blob([brotli.decompress(brotliOutput)]).text());
    // console.log("RET2: " + await new Blob([decompress(brotliOutput)]).text());

    // console.log(Buffer.from(decompressedData).toString('utf8')); // Prints 'some input'

    // , {
    //   mode: blob.type.startsWith('text/') ? 1 : 0
    // });
    // console.log(brotliOutput);
    const data = await blobToBase64(new Blob([brotliOutput]));

    const baseUrl = new URL("./echo.html", window.location.href.split('#')[0]).href;

    const uri = `${baseUrl}#${blob.type},${encodeURIComponent(data)}`;

    document.getElementById('out').href = uri;
    document.getElementById('outInfo').innerText = `Input = ${blob.size} bytes, Output = ${uri.length} chars`;
    // document.getElementById('outFrame').src = uri;

    const qrcodeElement = document.getElementById('qrcode');
    // https://www.npmjs.com/package/qrcode#options
    QRCode.toCanvas(qrcodeElement, uri, { errorCorrectionLevel: 'L', scale: 2 }, function (error) {
      if (error) {
        qrcodeElement.style.display = 'none';
        console.error(error)
      } else {
        qrcodeElement.style.display = null;
      }
    });
    // console.log(uri);
    // document.getElementById('qrcode').innerHTML = '';
    // var qrcode = new QRCode("qrcode", {
    //   correctLevel: QRCode.CorrectLevel.L,
    // });
    // qrcode.makeCode(uri);
  }

  document.getElementById('fileInput').onchange = event => encode(event.target.files[0]);
  document.getElementById('textInput').oninput = event => encode(new Blob([event.target.value], {type: 'text/plain'}));
});

echo.html

<script src="echo-bundle.js"></script>

echo.js

var decompress = require('brotli/decompress');

var blobToDataUri = blob =>
  new Promise((res) => Object.assign(new FileReader(), {onload: (e) => res(e.target.result)}).readAsDataURL(blob));

if (window.location.hash != '') {
  (async () => {
    var [type, data] = window.location.hash.substring(1).split(',', 2);
    var buffer = new Uint8Array(await (await fetch('data:;base64,' + data)).arrayBuffer());
    var blob = new Blob([decompress(buffer)], {type});

    // try {
      window.location.replace(URL.createObjectURL(blob)); // , {autoRevoke : false}
    // } catch (e) {
    //   window.document.write(`<iframe src="${await blobToDataUri(blob)}" frameborder=0 style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>`);
    // }

    // const file = new File([compressedContent], 'hello_world.txt.br', { type: 'application/brotli' });
    // const link = document.createElement('a');
    // link.setAttribute('href', url);
    // // link.setAttribute('download', file.name);
    // link.click();

  })();
} else {
  window.location.href = "create.html";
}

package.json

{
  "name": "encoding",
  "version": "1.0.0",
  "description": "",
  "main": "echo.js",
  "scripts": {
    "build-echo": "mkdir -p build && browserify -p esmify -p wasmify echo.js -o build/echo-bundle.js && html-inline -i echo.html -o build/echo.html -b build",
    "build-wasm": "mkdir -p build && webpack && cp test_wasm.html build",
    "build-create": "mkdir -p build && cp -R node_modules/wasm-brotli/*.{js,wasm} node_modules/qrcode/build/qrcode.js node_modules/qrcodejs/qrcode.min.js create.html node_modules/brotli-wasm/pkg.bundler/* build && webpack",
    "build": "npm run build-echo && npm run build-create && npm run build-wasm",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "brotli": "^1.3.2",
    "brotli-wasm": "^1.1.0",
    "qrcode": "^1.5.0",
    "qrcodejs": "^1.0.0"
  },
  "devDependencies": {
    "browserify": "^17.0.0",
    "esmify": "^2.1.1",
    "html-inline": "^1.2.0",
    "wasmify": "^4.0.0",
    "webpack": "^5.64.4",
    "webpack-cli": "^4.9.1"
  }
}