Update to ESM Modules

- Remove compiling/bundling with Browserify
- Upgrade to latest parse-torrent and webtorrent
- Switch to dynamically updating dependencies from jsDelivr

ext/TorrentPartsFASubset.yaml

@@ -1,5 +1,5 @@
 projectName: 'C:\Users\Leo\Desktop\TorrentPartsFASubset'
-version: 6.1.2
+version: 6.2.1
 icons:
   - magnet:
       - light
@@ -13,11 +13,12 @@ icons:
       - solid
   - link:
       - light
-      - duotone
-  - share-nodes:
       - solid
+      - duotone
   - file-arrow-down:
       - solid
+  - arrow-up-right-from-square:
+      - solid
   - file:
       - regular
   - file-word:

index.html

@@ -36,12 +36,14 @@
 
   <title>Torrent Parts | Inspect and edit what's in your Torrent file or Magnet link</title>
 
+  <link href="https://cdn.jsdelivr.net/npm/tippy.js@6/dist/tippy.css" rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/tippy.js@6/animations/shift-away-subtle.css" rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css" rel="stylesheet" />
   <link href="/src/style.css" rel="stylesheet" />
-  <link href="/ext/alata-latin-400.woff2" rel="preload" as="style">
-  <link href="/ext/alata-latin-400.woff" rel="preload" as="style">
+  <link href="/ext/alata-latin-400.woff2" rel="preload" as="style" />
+  <link href="/ext/alata-latin-400.woff" rel="preload" as="style" />
   <script async src="/ext/fa.min.js"></script>
   <script async defer src="https://buttons.github.io/buttons.js"></script>
-  <script src="/ext/notyf.min.js"></script>
 
   <script async defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "6f97f49b4c384ee197a2f319cebec274"}'></script>
 
@@ -51,7 +53,7 @@
 
   <header>
     <h1 id="logo">Torrent<span id="originalSourceIcon"><span class="fad fa-magnet fa-fw" aria-hidden="true"></span></span>Parts</h1>
-    <a class="github-button" href="https://github.com/leoherzog/TorrentParts" data-icon="octicon-star" data-show-count="true" aria-label="Star leoherzog/TorrentParts on GitHub">Star</a>
+    <a class="github-button" href="https://github.com/leoherzog/TorrentParts" data-icon="octicon-star" data-show-count="true" aria-label="Star TorrentParts on GitHub">Star</a>
   </header>
 
   <div id="startButtons">
@@ -82,9 +84,14 @@
     </button>
     
     <div id="share">
+      <a id="openURLWrapper" target="_blank">
+        <button id="openURL" aria-label="Open this Magnet URL in your Torrent client">
+          <span class="fas fa-arrow-up-right-from-square fa-2x"></span>
+        </button>
+      </a>
       <div>
         <button id="copyURL" aria-label="Copy this torrent.parts link to the clipboard">
-          <span class="fas fa-share-alt fa-2x" data-fa-transform="left-1"></span>
+          <span class="fas fa-link fa-2x"></span>
         </button>
       </div>
       <div>
@@ -119,7 +126,7 @@
         </div>
       </div>
       <div class="content">
-        <input id="name" type="text" placeholder="Unnamed" />
+        <input id="name" type="text" placeholder="Unnamed" dir="auto" />
       </div>
     </div>
 
@@ -146,7 +153,7 @@
         </div>
       </div>
       <div class="content">
-        <input id="comment" type="text" placeholder="Not included in the URL/File provided" />
+        <input id="comment" type="text" placeholder="Not included in the URL/File provided" dir="auto" />
       </div>
     </div>
 
@@ -211,10 +218,10 @@
   </div>
 
   <footer>
-    <a href="https://github.com/leoherzog/TorrentParts/releases" target="_blank" rel="noopener">v1.2</a>
+    <a href="https://github.com/leoherzog/TorrentParts/releases" target="_blank" rel="noopener">v2.0.0</a>
   </footer>
 
-  <script src="/bin/bundle.min.js"></script>
+  <script type="module" src="/src/parse.js"></script>
 
   <script>
     if ('serviceWorker' in navigator) {

package.json

@@ -1,42 +0,0 @@
-{
-  "name": "torrentparts",
-  "version": "1.2",
-  "description": "📑 A website to inspect and edit Torrent files and Magnet URLs",
-  "main": "bin/bundle.js",
-  "dependencies": {
-    "browserify": "^17.0.0",
-    "bytes": "^3.1.2",
-    "clipboard": "^2.0.10",
-    "magnet-uri": "^6.2.0",
-    "mime-types": "^2.1.35",
-    "parse-torrent": "^9.1.4",
-    "tippy.js": "^6.3.7",
-    "webtorrent": "^1.8.6"
-  },
-  "devDependencies": {
-    "buffer": "^6.0.3",
-    "notyf": "^3.10.0",
-    "terser": "^5.12.1",
-    "watchify": "^4.0.0"
-  },
-  "scripts": {
-    "watch": "watchify src/parse.js -o bin/bundle.js",
-    "compile": "browserify src/parse.js -o bin/bundle.js",
-    "minify": "terser bin/bundle.js -c -m -o bin/bundle.min.js",
-    "build": "npm run compile && npm run minify",
-    "update": "npm update -g && npm update && npm run build"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/leoherzog/TorrentParts.git"
-  },
-  "glitch": {
-    "projectType": "generated_static"
-  },
-  "author": "Leo Herzog",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/leoherzog/TorrentParts/issues"
-  },
-  "homepage": "https://github.com/leoherzog/TorrentParts"
-}

src/parse.js

@@ -1,10 +1,11 @@
-require('buffer');
-const clipboard = require('clipboard');
-const parser = require('parse-torrent');
-const bytes = require('bytes');
-const mime = require('mime-types');
-const WebTorrent = require('webtorrent');
-const tippy = require('tippy.js').default;
+import { Buffer } from 'https://cdn.jsdelivr.net/npm/buffer@6/+esm';
+import clipboard from 'https://cdn.jsdelivr.net/npm/clipboard@2/+esm'
+import parseTorrent, { toMagnetURI, toTorrentFile, remote as parseTorrentRemote } from 'https://cdn.jsdelivr.net/npm/parse-torrent@11/+esm';
+import bytes from 'https://cdn.jsdelivr.net/npm/bytes@3/+esm';
+import mime from 'https://cdn.jsdelivr.net/npm/mime-types@2/+esm'
+import WebTorrent from 'https://cdn.jsdelivr.net/npm/webtorrent@2/dist/webtorrent.min.js';
+import tippy from 'https://cdn.jsdelivr.net/npm/tippy.js@6/+esm';
+import { Notyf } from 'https://cdn.jsdelivr.net/npm/notyf@3/+esm';
 
 var examples = document.getElementById('examples');
 var example1 = document.getElementById('example1');
@@ -30,10 +31,13 @@ var removeWebseeds = document.getElementById('removeWebseeds');
 var pieces = document.getElementById('pieces');
 var files = document.getElementById('filesBody');
 var getFiles = document.getElementById('getFiles');
+var openURLWrapper = document.getElementById('openURLWrapper');
+var openURL = document.getElementById('openURL');
 var copyURL = document.getElementById('copyURL');
 var copyMagnet = document.getElementById('copyMagnet');
 var downloadTorrentWrapper = document.getElementById('downloadTorrentWrapper');
 var downloadTorrent = document.getElementById('downloadTorrent');
+var openURLTooltip = tippy(openURL, {"theme": "torrent-parts", "animation": "shift-away-subtle", "content": "Open this Magnet URL in your Torrent client"});
 var copyURLTooltip = tippy(copyURL, {"theme": "torrent-parts", "animation": "shift-away-subtle", "content": "Copy torrent.parts link to clipboard"});
 var copyMagnetTooltip = tippy(copyMagnet, {"theme": "torrent-parts", "animation": "shift-away-subtle", "content": "Copy Magnet link to clipboard"});
 var downloadTorrentTooltip = tippy(downloadTorrentWrapper, {"theme": "torrent-parts", "animation": "shift-away-subtle", "content": "Download Torrent file"});
@@ -63,10 +67,12 @@ var notyf = new Notyf({
 
 function placeDownloadTooltips(e) {
   if (window.innerWidth > 1080) {
+    openURLTooltip.setProps({"placement": "right"});
     copyURLTooltip.setProps({"placement": "right"});
     copyMagnetTooltip.setProps({"placement": "right"});
     downloadTorrentTooltip.setProps({"placement": "right"});
   } else {
+    openURLTooltip.setProps({"placement": "top"});
     copyURLTooltip.setProps({"placement": "top"});
     copyMagnetTooltip.setProps({"placement": "top"});
     downloadTorrentTooltip.setProps({"placement": "top"});
@@ -196,11 +202,11 @@ function start() {
 
 }
 
-function parse(toLoad) {
+async function parse(toLoad) {
   resetProperties();
   try {
     console.info('Attempting parse');
-    parsed = parser(toLoad);
+    parsed = await parseTorrent(toLoad);
     display();
     if (parsed.xs) {
       console.info('Magnet includes xs, attempting remote parse');
@@ -219,22 +225,29 @@ function parse(toLoad) {
   }
 }
 
-function parseRemote(toLoad) {
-  parser.remote(toLoad, function(err, result) {
-    if (err) {
-      notyf.error('Problem remotely fetching that file or parsing result');
-      console.warn(err);
-      resetProperties();
-      return;
-    }
+async function parseRemote(toLoad) {
+  try {
+    parsed = await new Promise((resolve, reject) => {
+      parseTorrentRemote(toLoad, (err, result) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve(result);
+        }
+      });
+    });
     source = 'remote-torrent-file';
     originalSourceIcon.innerHTML = '<span class="fad fa-file-alt fa-fw"></span>';
     sourceTooltip.setContent('Currently loaded information sourced from remotely fetched Torrent file');
-    parsed = result;
     display();
-  });
+  } catch (err) {
+    console.warn(err);
+    notyf.error('Problem remotely fetching that file or parsing result');
+    resetProperties();
+  }
 }
 
+
 function display() {
 
   console.log(parsed);
@@ -319,6 +332,7 @@ function display() {
       files.appendChild(createFileRow('', '...and another ' + (parsed.files.length - 100) + ' more files', ''));
     }
     files.appendChild(createFileRow('folder-tree', '', parsed.length));
+    openURLWrapper.href = toMagnetURI(parsed);
     downloadTorrentTooltip.setContent('Download Torrent file');
     downloadTorrent.addEventListener('click', saveTorrent);
     downloadTorrent.disabled = false;
@@ -335,13 +349,13 @@ function display() {
     downloadTorrent.disabled = true;
   }
 
-  copyURL.setAttribute('data-clipboard-text', window.location.origin + '#' + parser.toMagnetURI(parsed));
-  copyMagnet.setAttribute('data-clipboard-text', parser.toMagnetURI(parsed));
+  copyURL.setAttribute('data-clipboard-text', window.location.origin + '#' + toMagnetURI(parsed));
+  copyMagnet.setAttribute('data-clipboard-text', toMagnetURI(parsed));
 
   examples.style.display = 'none';
   properties.style.display = 'flex';
 
-  window.location.hash = parser.toMagnetURI(parsed);
+  window.location.hash = toMagnetURI(parsed);
 
   if (parsed.name) {
     document.title = 'Torrent Parts | ' + parsed.name;
@@ -413,7 +427,7 @@ function propertyChange(e) {
   } else {
     parsed[this.id] = this.value ? this.value : '';
   }
-  window.location.hash = parser.toMagnetURI(parsed);
+  window.location.hash = toMagnetURI(parsed);
   updateModified();
 }
 
@@ -497,7 +511,7 @@ function getFilesFromPeers() {
   parsed.announce.push('wss://tracker.btorrent.xyz');
   parsed.announce.push('wss://tracker.fastcast.nz');
   parsed.announce = parsed.announce.filter((v,i) => v && parsed.announce.indexOf(v) === i); // remove duplicates and empties
-  client.add(parser.toMagnetURI(parsed), (torrent) => {
+  client.add(toMagnetURI(parsed), (torrent) => {
     parsed.info = Object.assign({}, torrent.info); // clone object
     parsed.files = torrent.files;
     parsed.infoBuffer = torrent.infoBuffer;
@@ -513,7 +527,7 @@ function getFilesFromPeers() {
 
 // https://stackoverflow.com/a/36899900/2700296
 function saveTorrent() {
-  let data = parser.toTorrentFile(parsed);
+  let data = toTorrentFile(parsed);
   if (data !== null && navigator.msSaveBlob)
     return navigator.msSaveBlob(new Blob([data], { "type": "application/x-bittorrent" }), parsed.name + '.torrent');
   let a = document.createElement('a');