Compress string using gzip and native browser APIs

Compress string.js

function compress(string, encoding) {
  const byteArray = new TextEncoder().encode(string);
  const cs = new CompressionStream(encoding);
  const writer = cs.writable.getWriter();
  writer.write(byteArray);
  writer.close();
  return new Response(cs.readable).arrayBuffer();
}

function decompress(byteArray, encoding) {
  const cs = new DecompressionStream(encoding);
  const writer = cs.writable.getWriter();
  writer.write(byteArray);
  writer.close();
  return new Response(cs.readable).arrayBuffer().then(function (arrayBuffer) {
    return new TextDecoder().decode(arrayBuffer);
  });
}

Thanks for this!

Thanks for this!

No problem! This works well with a lot of the Web Crypto APIs

Thx - Typescript version:

export const compress = async (
  str: string,
  encoding = 'gzip' as CompressionFormat
): Promise<ArrayBuffer> => {
  const byteArray = new TextEncoder().encode(str)
  const cs = new CompressionStream(encoding)
  const writer = cs.writable.getWriter()
  writer.write(byteArray)
  writer.close()
  return new Response(cs.readable).arrayBuffer()
}

export const decompress = async (
  byteArray: string[],
  encoding = 'gzip' as CompressionFormat
): Promise<string> => {
  const cs = new DecompressionStream(encoding)
  const writer = cs.writable.getWriter()
  writer.write(byteArray)
  writer.close()
  const arrayBuffer = await new Response(cs.readable).arrayBuffer()
  return new TextDecoder().decode(arrayBuffer)
}

@USMortality nice

My TS version

const compress = (string: string, encoding: string): Promise<ArrayBuffer> => {
  const byteArray: Uint8Array = new TextEncoder().encode(string);
  const cs: CompressionStream = new CompressionStream(encoding);
  cs.writable.getWriter().write(byteArray).close();
  return new Response(cs.readable).arrayBuffer();
}

const decompress = (byteArray: Uint8Array, encoding: string): Promise<string> => {
  const cs: DecompressionStream = new DecompressionStream(encoding);
  cs.writable.getWriter().write(byteArray).close();
  return new Response(cs.readable).arrayBuffer().then((arrayBuffer: ArrayBuffer) => new TextDecoder().decode(arrayBuffer));
}

@Explosion-Scratch did you find a TS version that has CompressionStream defined? I can't find it in the latest release at all.

Resolves for me in VS: https://developer.mozilla.org/en-US/docs/Web/API/CompressionStream
tsc -version: Version 5.1.6

Ah confirmed that works. Looks like I need to try to bump our Typescript version which, sadly, might be a bit complicated. Thanks for your help!

thanks

How this can be used from another function? I would like to gzip compress a string and get the result in a string. But all i get is a Promise and i cannot get the result out of it. No, await does not work. Even if i make the function async, all i get is a Promise.

function compress(string, encoding) {
  const byteArray = new TextEncoder().encode(string);
  const cs = new CompressionStream(encoding);
  const writer = cs.writable.getWriter();
  writer.write(byteArray);
  writer.close();
  return new Response(cs.readable).arrayBuffer();
}

async function wrapper(s)
{
	var x = compress(s, 'gzip').then
	(
		function (arrayBuffer)
		{
			return new TextDecoder().decode(arrayBuffer);
		}
	);
	var y = await x;
	return y;
}

var a = wrapper('Example string...');
console.log(a);

And it will get a Promise. I would like to use it synchronously.

You should be able to use it like this:

const compressed = await(“hello world”, “utf-8”)
const decompressed = await decompress(compressed)

(Not tested; sent from my phone)

Yep, works:

function compress(string, encoding) {
  const byteArray = new TextEncoder().encode(string);
  const cs = new CompressionStream(encoding);
  const writer = cs.writable.getWriter();
  writer.write(byteArray);
  writer.close();
  return new Response(cs.readable).arrayBuffer();
}

function promptDownload(filename, content, mimetype)
{
	if (mimetype === undefined)
	{
		mimetype = 'application/octet-stream';
	}

	var a = window.document.createElement('A');
	a.href = window.URL.createObjectURL(new Blob([content], {type: mimetype}));
	a.download = filename;
	document.body.appendChild(a);
	a.click();
	document.body.removeChild(a);
}

async function do_stuff()
{
	const s = "Árvíztűrő tükörfúrógép\n";
	var c = await compress(s + s + s + s + s + s + s + s, 'gzip');
	promptDownload('stuff.txt.gz', c);
}
do_stuff();

Thank you for the help and Explosion-Scratch for writing it.

No problem @TCH68k - Happy to help, mention me if you want help with anything lol