ft: Add Compression stream api

package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@bradgarropy/next-seo": "^1.0.0",
+    "browser-fs-access": "^0.31.1",
     "filter-react-props": "^0.0.4",
     "framer-motion": "^4.1.17",
     "next": "11.1.2",

public/assets/files/lorem.txt

@@ -0,0 +1,9 @@
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo non felis a aliquet. Praesent a felis congue, volutpat nibh sit amet, ultricies purus. Aenean nisl augue, condimentum at elementum sit amet, suscipit sed tortor. Curabitur dapibus eu ipsum id tristique. Phasellus hendrerit in eros sit amet mollis. Praesent commodo mollis rhoncus. Vivamus tempor ligula nisi, consequat venenatis nisi ultrices at.
+
+Nunc nec nibh molestie, sagittis lectus sit amet, facilisis ipsum. Morbi pretium, nisl non suscipit dapibus, mauris nulla sollicitudin lectus, a egestas mauris turpis quis magna. Nulla sit amet vehicula libero. Donec quis risus cursus, varius sapien vitae, tincidunt nibh. Sed molestie aliquet ultricies. Nam ac erat laoreet, pellentesque arcu ut, maximus neque. Proin dictum egestas faucibus. Maecenas sed accumsan lorem. Mauris molestie elit eget ultrices ornare. Vestibulum ante sem, pretium et nibh a, eleifend fermentum ipsum. Ut egestas blandit magna ut gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum luctus justo sed aliquam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum et sapien ipsum. Aenean tristique rhoncus orci, eget pretium arcu auctor nec.
+
+Morbi at dictum ipsum. Vestibulum elit arcu, laoreet vel suscipit nec, pharetra nec tellus. Cras nec tellus ut tellus consequat auctor. Nulla non malesuada lacus. Donec sed aliquet magna, at pharetra risus. Aliquam aliquet elit sit amet auctor pellentesque. Sed rhoncus justo nulla, quis finibus dolor feugiat ut. Fusce vitae tincidunt eros. Nulla urna enim, dictum vel velit semper, porta vehicula metus. Vivamus dictum nibh lectus, nec sodales ligula pharetra vel. Phasellus turpis nibh, volutpat sed felis eleifend, suscipit aliquam magna. Etiam pharetra volutpat ligula ut commodo. Mauris at dolor vitae purus porta sollicitudin a at justo. Quisque magna risus, consectetur nec posuere quis, euismod a magna. Sed ut purus accumsan, pharetra est at, interdum risus. Duis eget tincidunt nibh, nec condimentum velit.
+
+Donec rutrum nisl quis iaculis iaculis. Mauris sodales vestibulum metus. Maecenas enim nibh, molestie sit amet libero vitae, eleifend consequat sem. Sed a dui quis eros pharetra semper. Fusce erat lorem, cursus non nisl ac, vestibulum laoreet nisl. Pellentesque blandit purus mi, ac lacinia felis semper in. Maecenas facilisis, dolor sit amet ullamcorper dignissim, elit nisi finibus odio, in tempus ante mauris ut libero. Suspendisse auctor eros augue, eu commodo ipsum fermentum at. Cras dignissim felis non augue ullamcorper sagittis. Vestibulum ut pellentesque tortor, vitae pellentesque ligula. Maecenas sit amet luctus lectus. Etiam laoreet velit mi, eget vulputate dolor varius eu.
+
+Nulla at risus non sapien eleifend hendrerit ac vitae mauris. Quisque semper, velit in sagittis vulputate, nisi diam placerat felis, id facilisis nisi diam nec nisl. Proin suscipit volutpat luctus. Integer sagittis congue risus ut aliquet. Integer tincidunt gravida pharetra. Maecenas commodo finibus orci gravida tincidunt. Mauris ac lorem accumsan, varius odio a, auctor lacus. Vestibulum nisl ligula, volutpat ut elit et, ultrices placerat quam. Morbi sodales lacus quam, vitae vulputate orci blandit sed. Sed non iaculis turpis, ut hendrerit nisl. Aenean imperdiet orci quis nisi placerat tempus. Duis sit amet placerat eros. Nulla faucibus eu orci ac luctus. Suspendisse vestibulum sed quam et varius. Suspendisse sagittis dolor libero, fringilla aliquet elit pharetra sit amet.

src/modules/apis/compression-streams/index.ts

@@ -0,0 +1,21 @@
+import { fileSave } from 'browser-fs-access';
+export const hasSupport = (): boolean => Boolean('CompressionStream' in window);
+
+async function compressedReadableStream(file: any) {
+  const readableStream = await fetch(file).then(response => response.body);
+
+  const compressedReadableStream = readableStream.pipeThrough(
+    new CompressionStream('gzip')
+  );
+
+  await fileSave(new Response(compressedReadableStream), {
+    fileName: 'lorem.gz',
+    extensions: ['.gz'],
+  });
+}
+
+const run = {
+  compressedReadableStream,
+};
+
+export default run;

src/modules/apis/data.ts

@@ -438,5 +438,22 @@ export const data: Array<Demo> = [
         'https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API',
       canIUseURL: 'https://caniuse.com/mdn-api_eyedropper',
     },
-  }, //replace item here
+  }, {
+  id: 'compression-streams', 
+  emoji: '🗜️',
+  title: 'Compression Streams API', 
+  description: 'The Compression Streams API provides a JavaScript API for compressing and decompressing streams of data using the gzip or deflate formats. Built in compression means that JavaScript applications will not need to include a compression library, which makes the download size of the application smaller.', 
+  meta: {
+    author: { 
+      name: 'Shyaka Tresor',
+      social: {
+        email: '[email protected]', 
+        github: 'shyakadev',
+        twitter: 'tshyaka',
+      },
+    },
+    apiDocURL: '',
+    canIUseURL: 'https://caniuse.com/mdn-api_compressionstream', 
+  },
+}, //replace item here
 ];

src/modules/demos/compression-streams/index.tsx

@@ -0,0 +1,25 @@
+import { Button } from '@/components/Button';
+import { NotSupported } from '@/components/NotSupported';
+import run, { hasSupport } from '../../apis/compression-streams';
+
+function CompressionStreams() {
+  const file = '/assets/files/lorem.txt';
+  if (!hasSupport) {
+    return <NotSupported />;
+  }
+
+  const compress = () => {
+    run.compressedReadableStream(file);
+  };
+
+  return (
+    <div>
+      <iframe src={file}></iframe>
+      <Button className="tw-mt-3" onClick={compress}>
+        Download as zipped file
+      </Button>
+    </div>
+  );
+}
+
+export default CompressionStreams;