refactor: load webtorrent source

package.json

@@ -85,19 +85,27 @@
     "autoprefixer": "^10.4.8",
     "bittorrent-tracker": "^9.19.0",
     "cross-env": "^7.0.3",
+    "crypto": "npm:crypto-browserify@^3.12.0",
     "eslint": "^8.21.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "http": "npm:http-browserify@^1.7.0",
+    "https": "npm:https-browserify@^1.0.0",
     "husky": "^8.0.1",
     "mprocs": "^0.6.3",
+    "path": "npm:path-browserify@^1.0.1",
     "postcss": "^8.4.16",
     "prettier": "^2.7.1",
     "pretty-quick": "^3.1.3",
+    "process": "^0.11.10",
     "serve": "^14.1.2",
-    "tailwindcss": "^3.1.8"
+    "stream": "npm:stream-browserify@^3.0.0",
+    "tailwindcss": "^3.1.8",
+    "url": "^0.11.0",
+    "util": "^0.12.5"
   },
   "jest": {
     "transformIgnorePatterns": [

src/index.tsx

@@ -1,5 +1,4 @@
-import { Buffer } from 'buffer'
+import './polyfills'
-
 import ReactDOM from 'react-dom/client'
 import 'typeface-roboto'
 
@@ -7,9 +6,6 @@ import 'index.sass'
 import Bootstrap from 'Bootstrap'
 import reportWebVitals from 'reportWebVitals'
 
-// Polyfill
-window.Buffer = Buffer
-
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(<Bootstrap />)
 

src/polyfills.ts

@@ -0,0 +1,8 @@
+import { Buffer } from 'buffer'
+
+// @ts-ignore
+import process from 'process/browser'
+
+// Polyfill
+window.Buffer = Buffer
+window.process = process

src/services/FileTransfer/FileTransfer.ts

@@ -1,12 +1,9 @@
-import { WebTorrent as WebTorrentType, Torrent } from 'webtorrent'
+import WebTorrent, { Torrent } from 'webtorrent'
-// @ts-ignore
 import streamSaver from 'streamsaver'
 // @ts-ignore
 import idbChunkStore from 'idb-chunk-store'
 import { detectIncognito } from 'detectincognitojs'
 
-// @ts-ignore
-import WebTorrent from 'webtorrent/webtorrent.min.js'
 import { trackerUrls } from 'config/trackerUrls'
 import { streamSaverUrl } from 'config/streamSaverUrl'
 
@@ -17,7 +14,7 @@ interface DownloadOpts {
 }
 
 export class FileTransfer {
-  private webTorrentClient = new (WebTorrent as unknown as WebTorrentType)()
+  private webTorrentClient = new WebTorrent()
 
   private torrents: Record<Torrent['magnetURI'], Torrent> = {}
 

src/setupTests.ts

@@ -8,7 +8,7 @@ afterEach(() => {
   jest.restoreAllMocks()
 })
 
-jest.mock('webtorrent/webtorrent.min.js', () => ({
+jest.mock('webtorrent', () => ({
   __esModule: true,
   default: class WebTorrent {},
 }))