Use JSX

.swcrc

@@ -1,7 +1,8 @@
 {
   "jsc": {
     "parser": {
-      "syntax": "typescript"
+      "syntax": "typescript",
+      "tsx": true
     },
     "target": "es2021"
   }

package.json

@@ -2,6 +2,7 @@
   "devDependencies": {
     "@swc/cli": "^0.1.51",
     "@swc/core": "^1.2.102",
+    "@types/react-dom": "^17.0.11",
     "@wasm-tool/wasm-pack-plugin": "^1.6.0",
     "css-loader": "^6.5.1",
     "html-webpack-plugin": "^5.5.0",
@@ -14,7 +15,9 @@
   },
   "dependencies": {
     "highlight.js": "^11.4.0",
-    "highlightjs-line-numbers.js": "^2.8.0"
+    "highlightjs-line-numbers.js": "^2.8.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "scripts": {
     "build": "webpack --mode production",

web/src/main.scss

@@ -43,6 +43,10 @@ main {
   justify-content: center;
 }
 
+th {
+  font-weight: normal;
+}
+
 .paste {
   @extend .hljs;
   border-radius: $padding;

web/src/render.tsx

@@ -15,6 +15,8 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 import './main.scss';
+import ReactDom from 'react-dom';
+import React from 'react';
 
 const hljs = require('highlight.js');
 (window as any).hljs = hljs;
@@ -96,36 +98,20 @@ function loadFromDb(mimeType: string, name?: string, language?: string) {
 }
 
 function createStringPasteUi(data, mimeType: string, name: string, lang?: string) {
-  const bodyEle = document.getElementsByTagName("body")[0];
+  const html = <main>
-  bodyEle.textContent = '';
+    <pre className='paste'>
+      <p className='unselectable centered'>{data.expiration}</p>
+      <a href={getObjectUrl([data.data], mimeType)} download={name} className='hljs-meta centered'>
+        Download file.
+      </a>
+      <hr />
+      <code>
+        {data.data}
+      </code>
+    </pre>
+  </main>;
 
-  const mainEle = document.createElement("main");
+  ReactDom.render(html, document.body);
-  const preEle = document.createElement("pre");
-  preEle.classList.add("paste");
-
-  const headerEle = document.createElement("p");
-  headerEle.classList.add("unselectable");
-  headerEle.classList.add("centered");
-  headerEle.textContent = data.expiration;
-  preEle.appendChild(headerEle);
-
-  const downloadEle = document.createElement("a");
-  downloadEle.href = getObjectUrl([data.data], mimeType);
-  downloadEle.download = name;
-
-  downloadEle.classList.add("hljs-meta");
-  downloadEle.classList.add("centered");
-  downloadEle.textContent = "Download file.";
-  preEle.appendChild(downloadEle);
-
-  preEle.appendChild(document.createElement("hr"));
-
-  const codeEle = document.createElement("code");
-  codeEle.textContent = data.data;
-  preEle.appendChild(codeEle);
-
-  mainEle.appendChild(preEle);
-  bodyEle.appendChild(mainEle);
 
   let languages = undefined;
 
@@ -178,42 +164,22 @@ function createStringPasteUi(data, mimeType: string, name: string, lang?: string
 }
 
 function createBlobPasteUi(data, name: string) {
-  const bodyEle = document.getElementsByTagName("body")[0];
+  const html = <main className='hljs centered fullscreen'>
-  bodyEle.textContent = '';
+    <div className='centered'>
+      <p>{data.expiration}</p>
+      <a href={getObjectUrl(data.data, name)} download={name} className='hljs-meta'>
+        Download binary file.
+      </a>
+    </div>
+    <p className='display-anyways hljs-comment' onClick={() => {
+      data.data.text().then(text => {
+        data.data = text;
+        createStringPasteUi(data, "application/octet-stream", name);
+      })
+    }}>Display anyways?</p>
+  </main>;
 
-  const mainEle = document.createElement("main");
+  ReactDom.render(html, document.body);
-  mainEle.classList.add("hljs");
-  mainEle.classList.add("centered");
-  mainEle.classList.add("fullscreen");
-
-  const divEle = document.createElement("div");
-  divEle.classList.add("centered");
-
-  const expirationEle = document.createElement("p");
-  expirationEle.textContent = data.expiration;
-  divEle.appendChild(expirationEle);
-
-  const downloadEle = document.createElement("a");
-  downloadEle.href = getObjectUrl(data.data, name);
-  downloadEle.download = name;
-  downloadEle.classList.add("hljs-meta");
-  downloadEle.textContent = "Download binary file.";
-  divEle.appendChild(downloadEle);
-
-  mainEle.appendChild(divEle);
-
-  const displayAnywayEle = document.createElement("p");
-  displayAnywayEle.classList.add("display-anyways");
-  displayAnywayEle.classList.add("hljs-comment");
-  displayAnywayEle.textContent = "Display anyways?";
-  displayAnywayEle.onclick = () => {
-    data.data.text().then(text => {
-      data.data = text;
-      createStringPasteUi(data, "application/octet-stream", name);
-    })
-  };
-  mainEle.appendChild(displayAnywayEle);
-  bodyEle.appendChild(mainEle);
 }
 
 function createImagePasteUi({ expiration, data, file_size }, name: string, mimeType: string) {
@@ -235,39 +201,6 @@ function createVideoPasteUi({ expiration, data }, name: string, mimeType: string
 }
 
 function createArchivePasteUi({ expiration, data, entries }, name: string) {
-  const bodyEle = document.getElementsByTagName("body")[0];
-  bodyEle.textContent = '';
-
-  const mainEle = document.createElement("main");
-
-  const sectionEle = document.createElement("section");
-  sectionEle.classList.add("paste");
-
-  const expirationEle = document.createElement("p");
-  expirationEle.textContent = expiration;
-  expirationEle.classList.add("centered");
-  sectionEle.appendChild(expirationEle);
-
-  const downloadEle = document.createElement("a");
-  downloadEle.href = getObjectUrl(data);
-  downloadEle.download = name;
-  downloadEle.textContent = "Download";
-  downloadEle.classList.add("hljs-meta");
-  downloadEle.classList.add("centered");
-  sectionEle.appendChild(downloadEle);
-
-  sectionEle.appendChild(document.createElement("hr"));
-
-  const mediaEle = document.createElement("table");
-  mediaEle.classList.add("archive-table");
-  const tr = mediaEle.insertRow();
-  tr.classList.add("hljs-title");
-  const tdName = tr.insertCell();
-  tdName.textContent = "Name";
-  const tdSize = tr.insertCell();
-  tdSize.classList.add("align-right");
-  tdSize.textContent = "File Size";
-
   // Because it's a stable sort, we can first sort by name (to get all folder
   // items grouped together) and then sort by if there's a / or not.
   entries.sort((a, b) => {
@@ -280,23 +213,32 @@ function createArchivePasteUi({ expiration, data, entries }, name: string) {
     return b.name.includes("/") - a.name.includes("/");
   });
 
-  for (const { name, file_size } of entries) {
+  const html = <main>
-    const tr = mediaEle.insertRow();
+    <section className='paste'>
-    const tdName = tr.insertCell();
+      <p className='centered'>{expiration}</p>
-    tdName.textContent = name;
+      <a href={getObjectUrl(data)} download={name} className='hljs-meta centered'>Download</a>
-    const tdSize = tr.insertCell();
+      <hr />
-    tdSize.textContent = file_size;
+      <table className='archive-table'>
-    tdSize.classList.add("align-right");
+        <thead>
-    tdSize.classList.add("hljs-number");
+          <tr className='hljs-title'><th>Name</th><th className='align-right'>File Size</th></tr>
-  }
+        </thead>
+        <tbody>
+          {
+            entries.map(({ name, file_size }) => {
+              return <tr><td>{name}</td><td className='align-right hljs-number'>{file_size}</td></tr>;
+            })
+          }
+        </tbody>
+      </table>
+    </section>
+  </main>;
+
+  ReactDom.render(html, document.body);
 
-  sectionEle.appendChild(mediaEle);
-  mainEle.appendChild(sectionEle);
-  bodyEle.appendChild(mainEle);
 }
 
 function createMultiMediaPasteUi(tag, expiration, data, name: string, mimeType: string, on_create?: Function | string) {
-  const bodyEle = document.getElementsByTagName("body")[0];
+  const bodyEle = document.body;
   bodyEle.textContent = '';
 
   const mainEle = document.createElement("main");
@@ -315,7 +257,6 @@ function createMultiMediaPasteUi(tag, expiration, data, name: string, mimeType:
   mediaEle.controls = true;
   mainEle.appendChild(mediaEle);
 
-
   const downloadEle = document.createElement("a");
   downloadEle.href = downloadLink;
   downloadEle.download = name;
@@ -332,14 +273,12 @@ function createMultiMediaPasteUi(tag, expiration, data, name: string, mimeType:
 }
 
 function renderMessage(message) {
-  const body = document.getElementsByTagName("body")[0];
+  ReactDom.render(
-  body.textContent = '';
+    <main className='hljs centered fullscreen'>
-  const mainEle = document.createElement("main");
+      {message}
-  mainEle.classList.add("hljs");
+    </main>,
-  mainEle.classList.add("centered");
+    document.body,
-  mainEle.classList.add("fullscreen");
+  );
-  mainEle.textContent = message;
-  body.appendChild(mainEle);
 }
 
 function getObjectUrl(data, mimeType?: string) {

yarn.lock

@@ -160,6 +160,32 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.9.tgz#0b7f161afb5b1cc12518d29b2cdc7175d5490628"
   integrity sha512-5dNBXu/FOER+EXnyah7rn8xlNrfMOQb/qXnw4NQgLkCygKBKhdmF/CA5oXVOKZLBEahw8s2WP9LxIcN/oDDRgQ==
 
+"@types/prop-types@*":
+  version "15.7.4"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
+  integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
+
+"@types/react-dom@^17.0.11":
+  version "17.0.11"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.11.tgz#e1eadc3c5e86bdb5f7684e00274ae228e7bcc466"
+  integrity sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "17.0.38"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.38.tgz#f24249fefd89357d5fa71f739a686b8d7c7202bd"
+  integrity sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
 "@wasm-tool/wasm-pack-plugin@^1.6.0":
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/@wasm-tool/wasm-pack-plugin/-/wasm-pack-plugin-1.6.0.tgz#a2dbec777b317b04f72e13f0080a3f483cd89809"
@@ -540,6 +566,11 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+csstype@^3.0.2:
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
+  integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
+
 dom-converter@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -909,6 +940,11 @@ jest-worker@^27.4.1:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
+"js-tokens@^3.0.0 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
 json-parse-better-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
@@ -962,6 +998,13 @@ lodash@^4.17.20, lodash@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
+loose-envify@^1.1.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
 lower-case@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
@@ -1058,6 +1101,11 @@ nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
+object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
 onetime@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
@@ -1212,6 +1260,23 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
+react-dom@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    scheduler "^0.20.2"
+
+react@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
@@ -1297,6 +1362,14 @@ sass@^1.48.0:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^3.1.0, schema-utils@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"