edward/omegaupload
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Use JSX

Browse source
This commit is contained in:
Edward Shen 2022-01-18 02:46:07 -08:00
parent 9a8658e744
commit 5fa69be1d5
Signed by: edward
GPG key ID: 19182661E818369F
5 changed files with 141 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.swcrc
View file

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

5
package.json
View file

@ -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",

4
web/src/main.scss
View file

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

177
web/src/render.tsx
View file

@ -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];
bodyEle.textContent = '';
const html = <main>
<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");
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 = <main className='hljs centered fullscreen'>
<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");
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 = <main>
<section className='paste'>
<p className='centered'>{expiration}</p>
<a href={getObjectUrl(data)} download={name} className='hljs-meta centered'>Download</a>
<hr />
<table className='archive-table'>
<thead>
<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];
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(
<main className='hljs centered fullscreen'>
{message}
</main>,
document.body,
);
}
function getObjectUrl(data, mimeType?: string) {

73
yarn.lock
View file

@ -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"