refactor build tooling

.browserslistrc

@@ -0,0 +1 @@
+IE 11

README.md

@@ -543,7 +543,7 @@ The asynchronous APIs also use `Worker`, which is not supported in a few browser
 Other than that, `fflate` is completely ES3, meaning you probably won't even need a bundler to use it.
 
 ## Testing
-You can validate the performance of `fflate` with `npm`/`yarn`/`pnpm` `test`. It validates that the module is working as expected, ensures the outputs are no more than 5% larger than competitors at max compression, and outputs performance metrics to `test/results`.
+You can validate the performance of `fflate` with `npm test`. It validates that the module is working as expected, ensures the outputs are no more than 5% larger than competitors at max compression, and outputs performance metrics to `test/results`.
 
 Note that the time it takes for the CLI to show the completion of each test is not representative of the time each package took, so please check the JSON output if you want accurate measurements.
 

demo/App.tsx

@@ -71,7 +71,7 @@ const App: FC = () => {
           marginBottom: '2vh'
         }}>
           <FilePicker allowDirs onFiles={setFiles} onError={setErr} onDrag={() => {}}>
-            {err && <div style={{ color: 'red' }}>Error: {err}</div>}
+            {err && <div style={{ color: 'red' }}>Error: {err.toString()}</div>}
             <div>{files ? ((files.length || 'No') + ' file' + (files.length == 1 ? '' : 's') + ' selected') : 'Loading...'}</div>
             <br />
           </FilePicker>

demo/augment.d.ts

@@ -9,37 +9,3 @@ declare module 'uzip' {
   }
   export = UZIP;
 }
-
-interface DataTransferItem {
-  webkitGetAsEntry(): FileSystemEntry;
-}
-
-interface BaseFileSystemEntry {
-  fullPath: string;
-  name: string;
-  isFile: boolean;
-  isDirectory: boolean;
-}
-
-interface FileSystemFileEntry extends BaseFileSystemEntry {
-  isFile: true;
-  isDirectory: false
-  file(onSuccess: (file: File) => void, onError: (err: Error) => void): void;
-}
-
-type FileSystemEntry = FileSystemFileEntry | FileSystemDirectoryEntry;
-
-
-interface FileSystemDirectoryReader {
-  readEntries(onSuccess: (entries: FileSystemEntry[]) => void, onError: (err: Error) => void): void;
-}
-
-interface FileSystemDirectoryEntry extends BaseFileSystemEntry {
-  isFile: false;
-  isDirectory: true;
-  createReader(): FileSystemDirectoryReader;
-}
-
-interface File {
-  webkitRelativePath: string;
-}

demo/components/code-box/sandbox.ts

@@ -18,7 +18,7 @@ const createWorkerProxy = (lib: string, keys: string[]): WorkerProxy => {
   const p: WorkerProxy = {};
   for (const k of keys) {
     const base = function(cb: (...args: unknown[]) => void) {
-      const w = new Worker('../../util/workers.ts');
+      const w = new Worker(new URL('../../util/workers.ts', import.meta.url), { type: 'module' });
       w.postMessage([lib, k]);
       w.onmessage = function(msg) {
         const args = msg.data;

demo/components/file-picker/index.tsx

@@ -27,7 +27,7 @@ const readRecurse = (dir: FileSystemDirectoryEntry, onComplete: (files: File[])
     } else reader.readEntries(onRead, onError);
     for (const entry of entries) {
       ++total;
-      if (entry.isFile) entry.file(f => onDone([
+      if (entry.isFile) (entry as FileSystemFileEntry).file(f => onDone([
         new File([f], entry.fullPath.slice(1), f)
       ]), onErr);
       else readRecurse(entry as FileSystemDirectoryEntry, onDone, onErr);
@@ -77,8 +77,8 @@ const FilePicker: FC<{
             if (!--lft && !errored) onFiles(outFiles);
           };
           for (let i = 0; i < tf.items.length; ++i) {
-            const entry = tf.items[i].webkitGetAsEntry();
-            if (entry.isFile) entry.file(f => onDone([f]), onErr);
+            const entry = tf.items[i].webkitGetAsEntry()!;
+            if (entry.isFile) (entry as FileSystemFileEntry).file(f => onDone([f]), onErr);
             else readRecurse(entry as FileSystemDirectoryEntry, onDone, onErr);
           }
         } else onFiles(Array.prototype.slice.call(tf.files));

demo/index.html

@@ -10,6 +10,6 @@
 </head>
 <body>
   <div id="app"></div>
-  <script src="index.tsx"></script>
+  <script type="module" src="index.tsx"></script>
 </body>
 </html>

demo/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import App from './App';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 if (process.env.NODE_ENV == 'production') {
   if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.register('sw.ts');
+    navigator.serviceWorker.register(new URL('sw.ts', import.meta.url), { type: 'module' });
   }
 }
 
-render(<App />, document.getElementById('app'));
+createRoot(document.getElementById('app')!).render(<App />);

demo/sw.ts

@@ -1,15 +1,8 @@
 /// <reference lib="webworker" />
+import { manifest, version } from '@parcel/service-worker'
 
-const sw = self as unknown as ServiceWorkerGlobalScope & {
-  __precacheManifest: ({ url: string, revision: string })[];
-};
-
-const precacheVersion = sw.__precacheManifest
-  .map(p => p.revision)
-  .join('');
-const precacheFiles = sw.__precacheManifest.map(p => p.url).filter(
-  u => /\.(ico)$/.test(u)
-);
+const precacheVersion = version
+const precacheFiles = manifest.filter(u => /\.(ico)$/.test(u));
 
 const ch = () => caches.open(precacheVersion);