From 5fa69be1d586d4f0b344e517ca34b6d4832fe3c8 Mon Sep 17 00:00:00 2001 From: Edward Shen Date: Tue, 18 Jan 2022 02:46:07 -0800 Subject: [PATCH] Use JSX --- .swcrc | 3 +- package.json | 5 +- web/src/main.scss | 4 + web/src/render.tsx | 177 +++++++++++++++------------------------------ yarn.lock | 73 +++++++++++++++++++ 5 files changed, 141 insertions(+), 121 deletions(-) diff --git a/.swcrc b/.swcrc index 857062a..af54b43 100644 --- a/.swcrc +++ b/.swcrc @@ -1,7 +1,8 @@ { "jsc": { "parser": { - "syntax": "typescript" + "syntax": "typescript", + "tsx": true }, "target": "es2021" } diff --git a/package.json b/package.json index 03517d0..04d5c5c 100644 --- a/package.json +++ b/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", diff --git a/web/src/main.scss b/web/src/main.scss index 16b71de..695872e 100644 --- a/web/src/main.scss +++ b/web/src/main.scss @@ -43,6 +43,10 @@ main { justify-content: center; } +th { + font-weight: normal; +} + .paste { @extend .hljs; border-radius: $padding; diff --git a/web/src/render.tsx b/web/src/render.tsx index 1688f64..1d2fe24 100644 --- a/web/src/render.tsx +++ b/web/src/render.tsx @@ -15,6 +15,8 @@ // along with this program. If not, see . 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]; - bodyEle.textContent = ''; + const html =
+ 
+      
{data.expiration}

+      
+        Download file.
+      
+      

+      
+        {data.data}
+      
+
+
; - const mainEle = document.createElement("main"); - 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); + ReactDom.render(html, document.body); 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]; - bodyEle.textContent = ''; + const html =
+
+

{data.expiration}

+ + Download binary file. + +
+

{ + data.data.text().then(text => { + data.data = text; + createStringPasteUi(data, "application/octet-stream", name); + }) + }}>Display anyways?

+
; - const mainEle = document.createElement("main"); - 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); + ReactDom.render(html, document.body); } 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 tr = mediaEle.insertRow(); - const tdName = tr.insertCell(); - tdName.textContent = name; - const tdSize = tr.insertCell(); - tdSize.textContent = file_size; - tdSize.classList.add("align-right"); - tdSize.classList.add("hljs-number"); - } + const html =
+
+

{expiration}

+ Download +
+ + + + + + { + entries.map(({ name, file_size }) => { + return ; + }) + } + +
NameFile Size
{name}{file_size}
+
+
; + + 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]; - body.textContent = ''; - const mainEle = document.createElement("main"); - mainEle.classList.add("hljs"); - mainEle.classList.add("centered"); - mainEle.classList.add("fullscreen"); - mainEle.textContent = message; - body.appendChild(mainEle); + ReactDom.render( +
+ {message} +
, + document.body, + ); } function getObjectUrl(data, mimeType?: string) { diff --git a/yarn.lock b/yarn.lock index fc197f4..80f3d94 100644 --- a/yarn.lock +++ b/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"